Spinners
Loading indicators in multiple designs — border ring, dual ring, dots, pulse, and bars — across sizes and tones.
Border Ring — Sizes
From 16px to 56px
16px
24px
32px
44px
56px
Border Ring — Colors
Six tones + neutral gray
brand
success
warning
error
purple
orange
gray
Dual Ring
Two-tone rotating ring
brand
success
warning
error
24px
36px
48px
Dots
Three bouncing dots — soft & friendly
brand
success
warning
error
Pulse
Sonar-style expanding ring
brand
success
warning
error
Bars
Equalizer-style animated bars
brand
success
warning
error
Inline Loading States
Spinners inside buttons & rows
Saving document
Saving…
Fetching analytics
Crunching numbers
Syncing files
3 of 12 files
Connecting to server
Establishing link
Full-Page Loader
Centered, with optional label
Loading workspace
Preparing your dashboards…
Choosing a Spinner
Match the spinner to the moment
Border ring
Default choice for buttons, rows & inline status. Compact & predictable.
Dots
Friendlier — use for chat typing indicators and lightweight content fetches.
Bars
Equalizer feel — good for media players and audio processing.
Pulse
Live / connected states — pair with a status dot to imply realtime activity.