Back to Motion Prompt examples
UI component names · #21
Skeleton screen
Grey shapes stand in for content while it loads. Clicking reload turns the list into grey blocks of the same shape with a sweeping shine; the content returns when loading ends.
Navigation & statusskeletonskeleton-screenplaceholdershimmerloadingghost-content
Full motion specification
How the movement works
Use it for lists or cards that take a moment to load, so the layout is visible while people wait.
- 014.5 s cycle on a 542×191 card. A two-row list (a 96×56 picture and three text lines each). The cursor clicks the reload icon at top right at 1.0 s.
- 02Over 1.05–1.2 s (linear) the content switches to grey #e9e7e5 rounded blocks of the same size and position.
- 03Shine: a white band 160 wide (transparent at the edges, opacity 0.75 in the middle) sweeps from x −200 to x 742 every 0.9 s, drawn only over the blocks.
- 04The content returns over 3.0–3.3 s (linear).
Prompt
While the list loads, show a skeleton screen: grey blocks in the shape of the content, with a shine sweeping left to right every 0.9 s.