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.91 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><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-14-kf 2400ms cubic-bezier(0.65, 0, 0.35, 1) infinite both;}@keyframes icon-14-kf {0%{opacity:0;}4%{opacity:1;}26%{opacity:0.08;}100%{opacity:0;}}@media (prefers-reduced-motion: reduce){.lit{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><circle class="bg" cx="6" cy="6" r="2.4"/><circle class="bg" cx="17" cy="6" r="2.4"/><circle class="bg" cx="28" cy="6" r="2.4"/><circle class="bg" cx="39" cy="6" r="2.4"/><circle class="bg" cx="50" cy="6" r="2.4"/><circle class="bg" cx="6" cy="17" r="2.4"/><circle class="bg" cx="17" cy="17" r="2.4"/><circle class="bg" cx="28" cy="17" r="2.4"/><circle class="bg" cx="39" cy="17" r="2.4"/><circle class="bg" cx="50" cy="17" r="2.4"/><circle class="bg" cx="6" cy="28" r="2.4"/><circle class="bg" cx="17" cy="28" r="2.4"/><circle class="bg" cx="28" cy="28" r="2.4"/><circle class="bg" cx="39" cy="28" r="2.4"/><circle class="bg" cx="50" cy="28" r="2.4"/><circle class="bg" cx="6" cy="39" r="2.4"/><circle class="bg" cx="17" cy="39" r="2.4"/><circle class="bg" cx="28" cy="39" r="2.4"/><circle class="bg" cx="39" cy="39" r="2.4"/><circle class="bg" cx="50" cy="39" r="2.4"/><circle class="bg" cx="6" cy="50" r="2.4"/><circle class="bg" cx="17" cy="50" r="2.4"/><circle class="bg" cx="28" cy="50" r="2.4"/><circle class="bg" cx="39" cy="50" r="2.4"/><circle class="bg" cx="50" cy="50" r="2.4"/><circle class="lit d00" cx="6" cy="6" r="3.1"/><circle class="lit d11" cx="17" cy="17" r="3.1"/><circle class="lit d22" cx="28" cy="28" r="3.1"/><circle class="lit d33" cx="39" cy="39" r="3.1"/><circle class="lit d44" cx="50" cy="50" r="3.1"/></svg>