PDS proposals
← All proposals

Spinner: agentic color variant

Extend the existing PDS v2 Spinner (not a new component).

Extends a PDS componentOpen in Storybook

proposals/Spinner/context.md20 lines · View on GitHub

Spinner: agentic color variant

Problem

AI/agentic surfaces (AgenticButton, pds-ai-active-border) use the AI gradient. The loading state on those surfaces needs a Spinner that matches, instead of the single-color default.

Proposal

Extend the existing PDS v2 Spinner (not a new component). The color prop already takes any CSS color or var(--token); add one named value, color='agentic', that paints the arc and track with --pds-gradient-ai-active, the same token pds-ai-active-border uses.

Constraints

  • Same sizes (s to 6xl), label, isInline and reduced-motion behavior as Spinner.
  • Track at reduced opacity, as with the single-color spinner.
  • Tokens only. --pds-gradient-ai-active is a CSS linear-gradient() value (one value for light and dark), so it cannot be an SVG stroke paint. See decisions.md.

Source

Erika's screenshot (~/Desktop/Spinner.png): row 1 gradient, row 2 current Spinner, nine sizes. No Figma or Jira links.