Spinner
Looping loading indicator. Use inside buttons, empty states, or inline next to text.
Default
Default size and colour.
With text
Inline next to status text.
Loading…
Sizes
Scale the spinner with a size-* utility class.
Custom colour
Tint the spinner with a text-* colour utility.
In a badge
A small spinner reads as an in-progress badge status.
Syncing
Processing
In an input group
Use the spinner as an addon to signal a loading field.
Saving...
In an empty state
Drop the spinner into an Empty media slot as a loading placeholder.
Loading workspace
Fetching your projects. This will only take a moment.