Components / Loading
5 components · 4 at 0 B
Loading animations for Astro: skeleton placeholders, a spinner, a progress bar or ring, and a preloader that counts to 100.
A preloader that counts from 0 to 100 and then lifts like a curtain, on a fixed layer that never blocks the page: pointer-events none from the first frame, aria-hidden, the page rendered and usable beneath.
An opening that plays once as a page loads and then gets out of the way, in one of three cuts: words (two to four words in turn, then the layer lifts), stairs (the layer is columns that rise away one after another) or split (a word, then the layer parts in two).
A bar that fills to its value when it scrolls into view, with the number counting up beside it, or a ring with the number in the middle.
Placeholder lines, optionally with an avatar, shimmering while content loads.
An indeterminate arc whose length breathes while it rotates, so it looks like it is working rather than spinning a fixed wedge.