Sheet 02.25 / Components · Controls

Loader

The pineapple ring turning while something loads: 1.6s per turn, linear. It stops under reduced motion.

CLASSb-loaderDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — loaderlive, from bundle.css

controls

Loading the curve…

Anatomy

Parts

Part	Class	Notes
Ring	`.b-loader`	ring.svg at 32px, turning.

Markup

Code

bundle.css

<div style="display:flex;align-items:center;gap:12px">
  <img class="b-loader" src="/brand/ring.svg" alt="">
  <span class="b-meta">Loading the curve…</span>
</div>

Say what is loading next to it.
Respect reduced motion.

Don't

Show it for work under 300ms.
Use more than one on a screen.