dot/matrix← all loaders
Ring PulseThe outer ring lights as one and slowly fades.
18ambient

Ring Pulse

The outer ring lights as one and slowly fades.

slug
icon-18
duration
2000ms
iteration
infinite
lit cells
16 / 25
size
2.71 KB
easing
cubic-bezier(0.25, 1, 0.5, 1)

used at typical sizes

Ring PulseThe outer ring lights as one and slowly fades.
16px
Ring PulseThe outer ring lights as one and slowly fades.
24px
Ring PulseThe outer ring lights as one and slowly fades.
32px
Ring PulseThe outer ring lights as one and slowly fades.
48px
Ring PulseThe outer ring lights as one and slowly fades.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Ring Pulse"><title>Ring Pulse</title><desc>The outer ring lights as one and slowly fades.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-18-kf 2000ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;}@keyframes icon-18-kf {0%{opacity:0.10;}20%{opacity:1;}60%{opacity:0.20;}100%{opacity:0.10;}}@media (prefers-reduced-motion: reduce){.lit{animation:none;opacity:0.45;}}.d00{animation-delay:0ms;}.d01{animation-delay:0ms;}.d02{animation-delay:0ms;}.d03{animation-delay:0ms;}.d04{animation-delay:0ms;}.d10{animation-delay:0ms;}.d14{animation-delay:0ms;}.d20{animation-delay:0ms;}.d24{animation-delay:0ms;}.d30{animation-delay:0ms;}.d34{animation-delay:0ms;}.d40{animation-delay:0ms;}.d41{animation-delay:0ms;}.d42{animation-delay:0ms;}.d43{animation-delay:0ms;}.d44{animation-delay:0ms;}</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>