Skip to content
LSD Framework
Component

Loader

Spinners, pulses, dots, skeletons, bars. Every loader respects prefers-reduced-motion and downgrades to a static accent indicator so people who turned animation off still get the signal.

01 · Spinner — rotating gradient ring
sm
md
lg
02 · Pulsing dot and three-dot bounce
pulse
dots
03 · Skeleton placeholder
04 · Indeterminate progress bar
05 · Determinate progress (driven by data-progress)
34%
06 · Inline (text + spinner) and centered (page-level)
Aligning constellations…
Initialising registry · please wait
View HTML
<div class="ld ld--spin ld--md" role="status"></div>
<div class="ld ld--pulse ld--md"></div>
<div class="ld--dots ld--md"><span></span><span></span><span></span></div>
<div class="ld-bar"><span class="ld-bar__fill"></span></div>
<div class="ld-bar ld-bar--det" style="--progress: 60%;">
  <span class="ld-bar__fill"></span>
</div>