Loading
Three loading strategies: skeleton for predictable content, spinner for an indeterminate request, and progressive disclosure to keep existing content usable.
Choose by intent
Pick the right loading pattern based on what the user is waiting for and how long they'll wait.
Skeleton
Show the shape of predictable content while it loads.
Spinner
Waiting for a response
Progressive
Keep available content usable while another part loads.
Loaded sections
60%
Spinner in button
Set loading during an asynchronous action. Button renders its own spinner and prevents duplicate submission while preserving its label.
Press Save changes to run a short simulated request.
Skeleton row
Animated placeholder rows that match the shape of the content being loaded.
Inline progress bar
Determinate progress for file uploads, multi-step processes, or batch operations.
Uploading report.pdf
0%
0.0 MB of 3.5 MB