Step loader

A 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.

Step loader 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

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.
FeedbackPick a mood and the row grows a text box; send and it folds into a thank-you. Three steps, one card that springs between sizes while the content swaps through a blur.
AlertA stack of inline callouts. Each arrives out of a blur; dismiss one and it folds shut, the rows below closing the gap.

Step loader

Step loader is part of Pro.

Related