Skeleton

Shimmering placeholders that hand over to real content. The bars of the placeholder stretch 8% past their size and blur away 30ms apart while the content un-blurs underneath.

Skeleton is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Get Pro Already Pro? Sign in

ProgressA bar and a ring whose fill moves on a spring while the percentage rolls like an odometer beside it. At 100% the fill turns green, the ring's number becomes a tick and a chime fires.
Step loaderA checklist that runs one step at a time. The live step spins a ring and shimmers its label; when it finishes the ring closes, a tick draws inside it and the next step lights.
Helpful?A light "Was this helpful?" pill with thumbs. Thumbs up thanks you with a pop and a ring of dots; thumbs down grows the pill into a small form (reason chips, a note, Send) and shrinks back to a "Thanks, noted" pill.
Result cardsA search-results stack that loads like a roll of film. Skeleton rows arrive out of a blur with light running down them, then each row develops in turn: the picture sharpens from a washed-out blur and the text replaces the bars.
Image placeholderA picture frame that waits for its image. A soft light wanders the frame and brightens the rim where it passes; once the image has loaded (and the light has had a moment) the picture resolves out of a blur and the caption swaps.
DraftA plain loading reveal. Shimmering skeletons sit where the content will be, then the card un-blurs in block by block in reading order while each skeleton fades out.

Skeleton

Skeleton is part of Pro.

Related