Spinner

Indeterminate wait after a user action. Prefer Button loading for submits; Skeleton for a known layout.

Default

md is 20px. Color inherits currentColor, defaulting to gray-1000.


        
          1
          
          <Spinner />

Sizes

Named sizes map to 16, 20, 24, 32, 36, 48, and 64. A number is pixels.


        
          1
          
          <Spinner size="sm" />
        

          2
          
          <Spinner size="md" />
        

          3
          
          <Spinner size="lg" />
        

          4
          
          <Spinner size="xl" />
        

          5
          
          <Spinner size="2xl" />
        

          6
          
          <Spinner size="3xl" />
        

          7
          
          <Spinner size="4xl" />
        

          8
          
          <Spinner :size="28" />

Colors

Tint with text-* on design tokens. The ring uses currentColor.

Default

Red

Green

Blue


        
          1
          
          <Spinner />
        

          2
          
          <Spinner class="text-[var(--ds-red-700)]" />
        

          3
          
          <Spinner class="text-[var(--ds-green-700)]" />
        

          4
          
          <Spinner class="text-[var(--ds-blue-700)]" />

Best practices

Use Spinner for an indeterminate wait of about one to three seconds: an icon refresh, a row retry, pagination. Named sizes stay on the control, not the parent pane.
On a submit control, set Button loading. Do not nest a Spinner inside the button by hand.
Known layouts use Skeleton. Inline copy uses Loading Dots. Known totals use Progress.
Mount the Spinner when the action starts. Toggling visibility on a pre-rendered spinner leaves a half-rotated ring at idle.
After about a second, pair the ring with copy that names the work: Verifying…, Deploying….
Set aria-busy="true" on the in-flight region. Keep the original trigger focusable. The SVG is aria-hidden.