Skip to content
tileio

Menu

9 layers · 2 free

Loader and preloader animations

There are two kinds of loader and they need different things. A preloader covers the page once while assets arrive, so it can be expressive: count to 100, part like curtains, draw the logo. An inline loader sits in a button or a card while a request runs, so it should be small and quiet. The first five here are preloaders and page transitions; the rest are inline.

The demos run on timers. Each loader is driven by a class or a single value, so in production you trigger it from the real load event or upload progress instead.

The 9 layers, in order

  1. Big numerals count from 0 to 100 on an eased curve while a hairline fills, then the whole curtain lifts.

  2. Two panels meet at a seam and part like stage curtains, the content scaling into place behind them.

  3. Your logo's outline strokes itself in, fills with the accent and the panel slides away; path lengths are read at runtime.

  4. A slanted panel covers the view with the destination's name, then wipes out to reveal the next page.

  5. 'Preparing your workspace' rolls up one word at a time in a serif, the last word holding before the panel clears.

  6. Grey blocks with a sweeping sheen that crossfade into the real card in place, with no layout shift.

  7. A ring driven by one percent value, with an indeterminate twin that spins until a number arrives.

  8. Five three-dot loops (bounce, wave, pulse, typing, chase) sized in em, so they scale with the text around them.

  9. A button that collapses into a spinner while the request runs and comes back wide with a drawn check.

Browse the full catalogue: Elements

Related collections

All collections