dot/matrix← all loaders
DockThe bottom row fills left-to-right like a typewriter loading bar.
49progress

Dock

The bottom row fills left-to-right like a typewriter loading bar.

slug
icon-49
duration
2000ms
iteration
infinite
lit cells
5 / 25
size
1.62 KB
easing
cubic-bezier(0.25, 1, 0.5, 1)

used at typical sizes

DockThe bottom row fills left-to-right like a typewriter loading bar.
16px
DockThe bottom row fills left-to-right like a typewriter loading bar.
24px
DockThe bottom row fills left-to-right like a typewriter loading bar.
32px
DockThe bottom row fills left-to-right like a typewriter loading bar.
48px
DockThe bottom row fills left-to-right like a typewriter loading bar.
72px

react

tsx
<DotMatrixIcon iconIndex={48} size={48} />

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Dock"><title>Dock</title><desc>The bottom row fills left-to-right like a typewriter loading bar.</desc><defs><circle id="b" r="2.4" fill="#ffffff" opacity="0.07"/><circle id="l" r="3.1"/></defs><style>.l{fill:#ffffff;opacity:0;animation:icon-49-k 2000ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;}@keyframes icon-49-k{0%{opacity:0.08;}14%{opacity:1;}72%{opacity:0.95;}100%{opacity:0.08;}}@media (prefers-reduced-motion:reduce){.l{animation:none;opacity:0.45;}}.d40{animation-delay:0ms;}.d41{animation-delay:333ms;}.d42{animation-delay:667ms;}.d43{animation-delay:1000ms;}.d44{animation-delay:1333ms;}</style><use href="#b" x="6" y="6"/><use href="#b" x="17" y="6"/><use href="#b" x="28" y="6"/><use href="#b" x="39" y="6"/><use href="#b" x="50" y="6"/><use href="#b" x="6" y="17"/><use href="#b" x="17" y="17"/><use href="#b" x="28" y="17"/><use href="#b" x="39" y="17"/><use href="#b" x="50" y="17"/><use href="#b" x="6" y="28"/><use href="#b" x="17" y="28"/><use href="#b" x="28" y="28"/><use href="#b" x="39" y="28"/><use href="#b" x="50" y="28"/><use href="#b" x="6" y="39"/><use href="#b" x="17" y="39"/><use href="#b" x="28" y="39"/><use href="#b" x="39" y="39"/><use href="#b" x="50" y="39"/><use href="#b" x="6" y="50"/><use href="#b" x="17" y="50"/><use href="#b" x="28" y="50"/><use href="#b" x="39" y="50"/><use href="#b" x="50" y="50"/><use class="l d40" href="#l" x="6" y="50"/><use class="l d41" href="#l" x="17" y="50"/><use class="l d42" href="#l" x="28" y="50"/><use class="l d43" href="#l" x="39" y="50"/><use class="l d44" href="#l" x="50" y="50"/></svg>