Loading Dots

Indeterminate wait inside a line of copy. Buttons use their own loading prop instead.

Sizes

Named sizes are sm (4px), md (6px), and lg (8px). Default is md. A number is the dot diameter in pixels.


        
          1
          
          <LoadingDots size="sm" />
        

          2
          
          <LoadingDots size="md" />
        

          3
          
          <LoadingDots size="lg" />
        

          4
          
          <LoadingDots :size="10" />

With text

Default slot renders before the dots. Name the work that is still running.

LoadingSavingDeploying


        
          1
          
          <LoadingDots size="md">
        

          2
          
            <span class="text-[13px] text-[var(--ds-gray-900)]">Loading</span>
        

          3
          
          </LoadingDots>

Color

Dots use currentColor. Change the wrapper text color to retint them.


        
          1
          
          <LoadingDots class="text-[var(--ds-gray-1000)]" />
        

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

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

Best practices

Short waits inside a sentence: Saving, Building, Deploying. Layout placeholders → Skeleton. Known progress → Progress. Icon-sized waits → Spinner.
Do not drop dots into a Button label. Set loading on Button so the control stays the same size and remains focusable.
The trailing word names the work still in flight. Saved plus dots is a contradiction.
The root already has aria-live="polite". Meaning lives in the slot text; do not add a second aria-label on the dots.
Pass a numeric size only when a named size misses the adjacent type. One animated indicator per row.