Status

A dot and a word. Live and online dots breathe; the word crossfades out of a blur when the state changes.

Status is part of Pro.

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

ChipRemovable chips. A chip shrinks into a blur when removed and the rest close the gap on a spring.
Outcome statesFour quiet endings, each with its own treatment, behind a small picker. Stopped: the partial stays and the cursor thins to a hairline.
SkeletonShimmering 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.
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.