Loaders
Loading indicators and skeleton states for pending content, actions and background work.
Spinner sizes
Use the smallest loader that remains clear in its surrounding context.
Small
Medium
Large
Extra large
Spinner colors
Match a loader to the status or context it represents.
Primary
Info
Success
Warning
Danger
Dots and pulse
A softer alternative for inline waiting states and assistant-like activity.
Syncing changes
Linear loader
A familiar bar for streaming or unknown-duration work.
Loading analytics
Syncing documents
Skeleton loaders
Mirror the expected layout while cards, lists and charts are still loading.
Button loading
Disable duplicate actions and show immediate feedback inside the action control.
Content overlay
Keep context visible while a focused section is loading or refreshing.
Monthly performance
$84,240Updated moments ago
Empty loading state
Center a loader when there is no existing content to preserve.
Loading projects
Gathering the latest workspace data