On this page
Overview
Show code, CardsLoading.tsx
Variants
Placeholder items
Where the shape is known, the page renders its own components as skeletons over placeholder items, so its code is the same loading and loaded.
- Placeholder items give the components stand-ins to render.
- Text that hasn't arrived shows as a bar the length of its text style.
Show code, SkeletonList.tsx
No known shape
A Spinner says what is loading beside it.
Show code, SearchResultsLoading.tsx
An action
The button that saves shows the work in progress.
Show code, PendingButton.tsx
Measurable work
Progress measures each file.
Show code, UploadProgress.tsx
A whole page
The top bar's progress bar shows the next page is on its way.
Show code, PageProgress.tsx
Anatomy
Busy root
Title bar
Meta bar
Description bars
Action shape
Show code, SkeletonAnatomy.tsx
Behaviour
When it shows
Show the skeleton only once a load takes a noticeable moment, so quick loads never flash it.
Pulse
Every bar and shape breathes between a stronger and a fainter tone, in step across the page.
- The skeleton's own surfaces, such as a card or a row, take a faint tint that barely moves, so they keep their edges and the layout stands still.
- For people who ask for reduced motion it breathes slower and shallower: only the tone changes.
- In forced colors the bars stand still in the system's gray.
Rules
A loading state holds the place of what is coming, and never says how long it takes.
Use it when
- A page, a region or a result that takes a noticeable while
- Work with a measurable end, such as an upload
Which to use
Show what is coming in its place and shape where you can, and say only that something is on its way where you can't.
- A skeleton
Content of a known shape, in its own components.
- A spinner with its label
Content of no known shape, such as search results.
- A spinner beside it
An update to what is already shown.
- A pending button
The result of an action, on the button that started it.
- A progress bar
Work whose end can be measured, such as an upload.
- The top bar's progress
A whole page on its way.
Show code, SkeletonInPlace.tsx
Show code, SpinnerInPlace.tsx
Show code, RefreshInPlace.tsx
Show code, SkeletonOnRefresh.tsx
Media
Give images and video their shape before they load, so they hold their place. Dev mode reports what moves as content lands.
Content
Name what is loading, and never promise a time, such as "Almost there".
- Count in the units people think in, such as "12 of 40 MB".
- Say what it is, such as "Loading projects" or "Uploading annual-review.pdf".
Accessibility
Focus and keyboard
Tab passes over a skeleton's content until it loads. A skeleton popup, sheet or supporting pane keeps focus, so Esc still closes it.