Geist Design System

Loading Dots

Indicate an action running in the background.

Default

With text

Loading

Best Practices

When to use

  • Use Loading Dots embedded in copy for short indeterminate waits, e.g. Saving<LoadingDots /> or Building<LoadingDots />.
  • For buttons, set the loading prop on Button instead of dropping dots inside the label.
  • For layout placeholders use Skeleton; for known progress use Progress; for icon-sized indeterminate waits use Spinner.

Behavior

  • Pass size (number, dot diameter in px) only when the default doesn’t match adjacent type size.
  • Keep the trailing label specific to the work in flight (Saving, Deploying, Uploading) so a wait over ~1s still tells the user what’s happening.
  • Don’t string Loading Dots after a completed verb (Saved<LoadingDots />); the dots imply ongoing work.

Accessibility

  • Mark the wrapping span with aria-live="polite" so screen readers pick up the in-progress label without interrupting.
  • The dots are decorative; the surrounding text carries meaning, so don’t add aria-label to the component itself.
  • Honor prefers-reduced-motion and avoid pairing Loading Dots with another animated indicator on the same line.