Loaders
Skeleton Loader
Content-shaped placeholders that stand in while data loads.
#skeleton#shimmer#placeholder
6 frameworksBeginner
Loading…
Three dots on a stagger - the “still thinking” loader.
<!--
Three dots on a stagger - the "someone is typing" loader. The stagger IS the
component: identical delays give you three dots bouncing in unison, which
reads as one blinking blob rather than a wave.
Same accessibility shape as every loader here: dots aria-hidden, one
role="status" wrapper with a hidden sentence.
-->
<div class="dots" role="status">
<span class="dots__group" aria-hidden="true">
<span class="dots__dot"></span>
<span class="dots__dot"></span>
<span class="dots__dot"></span>
</span>
<span class="dots__label">Loading…</span>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'Loading…' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
The stagger is the component: identical delays give you three dots pulsing in unison, which reads as one blinking blob rather than a wave. Tailwind has no animation-delay utility, so those stay inline. The reduced-motion fallback needs one more line than people expect - reset the opacity too, or the dots freeze mid-fade at 45% and read as disabled rather than busy.