dot/matrix← all loaders
BounceA bright dot travels along the main diagonal.
14spinner

Bounce

A bright dot travels along the main diagonal.

slug
icon-14
duration
2400ms
iteration
infinite
lit cells
5 / 25
size
1.60 KB
easing
cubic-bezier(0.65, 0, 0.35, 1)

used at typical sizes

BounceA bright dot travels along the main diagonal.
16px
BounceA bright dot travels along the main diagonal.
24px
BounceA bright dot travels along the main diagonal.
32px
BounceA bright dot travels along the main diagonal.
48px
BounceA bright dot travels along the main diagonal.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Bounce"><title>Bounce</title><desc>A bright dot travels along the main diagonal.</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-14-k 2400ms cubic-bezier(0.65, 0, 0.35, 1) infinite both;}@keyframes icon-14-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;}}.d00{animation-delay:0ms;}.d11{animation-delay:300ms;}.d22{animation-delay:600ms;}.d33{animation-delay:900ms;}.d44{animation-delay:1200ms;}</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 d00" href="#l" x="6" y="6"/><use class="l d11" href="#l" x="17" y="17"/><use class="l d22" href="#l" x="28" y="28"/><use class="l d33" href="#l" x="39" y="39"/><use class="l d44" href="#l" x="50" y="50"/></svg>