Guides
Customization
Every loader takes the same five props: color, size, dotSize, cellPadding and speed. All are optional.
Color
Pass any CSS color to color. Leave it out and each loader uses its own soft pastel. CSS variables work too, so a loader can follow your theme: color="var(--primary)".
var(--brand)
oklch(0.871 0.059 72.741)
oklch(0.864 0.05 276.62)
oklch(0.909 0.061 125.704)
oklch(0.866 0.043 5.208)
Size and dot size
size is the width of the whole loader in pixels, not of one dot. The default is 24. dotSize sets each dot, default 3. The gap between dots adjusts on its own, so the loader stays the same size when you change dotSize.
size=18
size=24
size=40
Spacing
To set the gap between dots yourself, pass cellPadding in pixels. It overrides size, and the loader grows to fit. 0 makes the dots touch.
cellPadding=0
cellPadding=2
cellPadding=4
cellPadding=6
Speed
speed multiplies the playback speed. 1 is normal (the default), 2 is twice as fast, 0.5 is half.
speed=0.5
speed=1
speed=1.5
speed=2
Combining props
Props combine freely. A few real-world setups:
subtle
ai thinking
inline spinner
hero