Alert
A message in the page: note, success, warning or error, told apart by the icon, not by color. The icon draws itself, a dismissed alert folds away and an error unfolds its log.
View codeThe library
Feedback & loading
6 ways to say “hold on” or “done”: spinners, progress bars, skeletons, alerts, empty states. Lighter than what they're waiting for.
Empty State
What a list shows when it is empty: a CSS drawing that answers when you come near, a line in a human voice and the next step. A second take for searches that find nothing.
View code
Top Loading Bar
The thin line at the top of the screen while a page loads: it creeps in shrinking steps, runs to the end and slips off to the right. Starts by itself on the site's links.
View code
Spinner
A loading status sized on its text: a breathing ring, twelve bars, three dots or a terminal braille cell. Add .is-done and a tick draws itself while the words roll.
View code
Progress
A bar or a ring driven by data-value: the percentage rolls like an odometer, a segment slides while nobody knows, and at 100 a tick draws itself.
View code
Skeleton
Bones drawn from the content itself, one shine across them all. When it loads, a soft edge sweeps down and turns each bone into its line; late images keep theirs.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it