Loading Dots
ProAn animated sequence of three bouncing dots indicating an indeterminate loading state. Used for inline loading indicators within buttons, table cells, chat interfaces, and compact spaces where a full spinner would be too large. The dots animate in sequence to convey ongoing activity.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Small | Compact dots for inline use within text or table cells. | Use inside table cells, badges, or other tight spaces where content is loading. |
| Medium |
Usage Guidelines
Do
Add aria-label="Loading" to the container for screen reader users.
Don't
Use for full-page loading — use Spinner or a skeleton screen instead.
Do
Use within buttons to indicate an in-progress action without replacing the button text.
Don't
Display indefinitely without a timeout — provide an error state after a reasonable wait.
Do
Prefer Loading Dots over Spinner in compact or inline contexts.
Don't
Omit the accessible label — screen readers will not announce the loading state.
Code
Design Tokens
Accessibility
- Container must have role="status" and aria-label="Loading" to announce the loading state.
- Individual dots are decorative — they do not need accessible labels.
- When loading completes, remove the loading dots and let the new content announce itself.
- Respect prefers-reduced-motion by pausing or significantly slowing the animation.