Loading…
Live component · try it
Premiumloader · idle · dark
Dots Loader
Five small inline loaders built from three dots each: a bounce, a wave, a pulse that scales in sequence, a 'typing' dim-brighten and a horizontal slide where the dots chase each other. Drop one next to a label, inside a button, or in a chat bubble.
The mechanic
Each dot is `0.5em` wide; variants differ only in the keyframe: bounce (translateY −0.5em), wave (scaleY), pulse (scale 0.5 → 1), typing (opacity 0.25 → 1), chase (translateX with the first dot wrapping). Delays are 0, 160 and 320 ms, which reads as a rhythm without feeling mechanical.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
