dot/matrix← all loaders
LoadingA trailing spinner sweeps the outer ring.
07spinner

Loading

A trailing spinner sweeps the outer ring.

slug
icon-07
duration
2000ms
iteration
infinite
lit cells
16 / 25
size
2.71 KB
easing
linear

used at typical sizes

LoadingA trailing spinner sweeps the outer ring.
16px
LoadingA trailing spinner sweeps the outer ring.
24px
LoadingA trailing spinner sweeps the outer ring.
32px
LoadingA trailing spinner sweeps the outer ring.
48px
LoadingA trailing spinner sweeps the outer ring.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Loading"><title>Loading</title><desc>A trailing spinner sweeps the outer ring.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-07-kf 2000ms linear infinite both;}@keyframes icon-07-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;}.d01{animation-delay:125ms;}.d02{animation-delay:250ms;}.d03{animation-delay:375ms;}.d04{animation-delay:500ms;}.d10{animation-delay:1875ms;}.d14{animation-delay:625ms;}.d20{animation-delay:1750ms;}.d24{animation-delay:750ms;}.d30{animation-delay:1625ms;}.d34{animation-delay:875ms;}.d40{animation-delay:1500ms;}.d41{animation-delay:1375ms;}.d42{animation-delay:1250ms;}.d43{animation-delay:1125ms;}.d44{animation-delay:1000ms;}</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 d01" cx="17" cy="6" r="3.1"/><circle class="lit d02" cx="28" cy="6" r="3.1"/><circle class="lit d03" cx="39" cy="6" r="3.1"/><circle class="lit d04" cx="50" cy="6" r="3.1"/><circle class="lit d10" cx="6" cy="17" r="3.1"/><circle class="lit d14" cx="50" cy="17" r="3.1"/><circle class="lit d20" cx="6" cy="28" r="3.1"/><circle class="lit d24" cx="50" cy="28" r="3.1"/><circle class="lit d30" cx="6" cy="39" r="3.1"/><circle class="lit d34" cx="50" cy="39" r="3.1"/><circle class="lit d40" cx="6" cy="50" r="3.1"/><circle class="lit d41" cx="17" cy="50" r="3.1"/><circle class="lit d42" cx="28" cy="50" r="3.1"/><circle class="lit d43" cx="39" cy="50" r="3.1"/><circle class="lit d44" cx="50" cy="50" r="3.1"/></svg>