dot/matrix← all loaders
MarqueeA bright band scrolls across the middle row left to right.
54spinner

Marquee

A bright band scrolls across the middle row left to right.

slug
icon-54
duration
1800ms
iteration
infinite
lit cells
5 / 25
size
1.59 KB
easing
linear

used at typical sizes

MarqueeA bright band scrolls across the middle row left to right.
16px
MarqueeA bright band scrolls across the middle row left to right.
24px
MarqueeA bright band scrolls across the middle row left to right.
32px
MarqueeA bright band scrolls across the middle row left to right.
48px
MarqueeA bright band scrolls across the middle row left to right.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Marquee"><title>Marquee</title><desc>A bright band scrolls across the middle row left to right.</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-54-k 1800ms linear infinite both;}@keyframes icon-54-k{0%{opacity:0;}4%{opacity:1;}26%{opacity:0.08;}100%{opacity:0;}}@media (prefers-reduced-motion:reduce){.l{animation:none;opacity:0.45;}}.d20{animation-delay:0ms;}.d21{animation-delay:360ms;}.d22{animation-delay:720ms;}.d23{animation-delay:1080ms;}.d24{animation-delay:1440ms;}</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 d20" href="#l" x="6" y="28"/><use class="l d21" href="#l" x="17" y="28"/><use class="l d22" href="#l" x="28" y="28"/><use class="l d23" href="#l" x="39" y="28"/><use class="l d24" href="#l" x="50" y="28"/></svg>