25 CSS Spinners 14 / 25
Infinity Loop Stroke Spinner
An SVG infinity symbol (∞) animates its stroke drawing from start to end and back using stroke-dasharray and stroke-dashoffset, with a glowing lime-green line on a dark field.
This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.
The code
<div class="sp-14">
<svg class="sp-14__svg" viewBox="-10 -10 120 60">
<path class="sp-14__track" d="M50,20 C50,4 72,4 72,20 C72,36 94,36 94,20 C94,4 72,4 72,20 C72,36 50,36 50,20 C50,4 28,4 28,20 C28,36 6,36 6,20 C6,4 28,4 28,20 C28,36 50,36 50,20"/>
<path class="sp-14__path" d="M50,20 C50,4 72,4 72,20 C72,36 94,36 94,20 C94,4 72,4 72,20 C72,36 50,36 50,20 C50,4 28,4 28,20 C28,36 6,36 6,20 C6,4 28,4 28,20 C28,36 50,36 50,20"/>
</svg>
</div> <div class="sp-14">
<svg class="sp-14__svg" viewBox="-10 -10 120 60">
<path class="sp-14__track" d="M50,20 C50,4 72,4 72,20 C72,36 94,36 94,20 C94,4 72,4 72,20 C72,36 50,36 50,20 C50,4 28,4 28,20 C28,36 6,36 6,20 C6,4 28,4 28,20 C28,36 50,36 50,20"/>
<path class="sp-14__path" d="M50,20 C50,4 72,4 72,20 C72,36 94,36 94,20 C94,4 72,4 72,20 C72,36 50,36 50,20 C50,4 28,4 28,20 C28,36 6,36 6,20 C6,4 28,4 28,20 C28,36 50,36 50,20"/>
</svg>
</div>.sp-14,.sp-14 *,.sp-14 *::before,.sp-14 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-14{
--bg:#04080f;
--c:#76ff03;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:var(--bg);
}
.sp-14__svg{
width:120px;
height:60px;
overflow:visible;
filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 12px rgba(118,255,3,0.3));
}
.sp-14__path{
fill:none;
stroke:var(--c);
stroke-width:3;
stroke-linecap:round;
stroke-dasharray:300;
stroke-dashoffset:300;
animation:sp-14-draw 2s ease-in-out infinite;
}
.sp-14__track{
fill:none;
stroke:rgba(118,255,3,0.1);
stroke-width:3;
stroke-linecap:round;
}
@keyframes sp-14-draw{
0%{stroke-dashoffset:300;opacity:1}
50%{stroke-dashoffset:0;opacity:1}
100%{stroke-dashoffset:-300;opacity:0}
}
@media (prefers-reduced-motion: reduce){
.sp-14__path{animation:none;stroke-dashoffset:0}
} .sp-14,.sp-14 *,.sp-14 *::before,.sp-14 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-14{
--bg:#04080f;
--c:#76ff03;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:var(--bg);
}
.sp-14__svg{
width:120px;
height:60px;
overflow:visible;
filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 12px rgba(118,255,3,0.3));
}
.sp-14__path{
fill:none;
stroke:var(--c);
stroke-width:3;
stroke-linecap:round;
stroke-dasharray:300;
stroke-dashoffset:300;
animation:sp-14-draw 2s ease-in-out infinite;
}
.sp-14__track{
fill:none;
stroke:rgba(118,255,3,0.1);
stroke-width:3;
stroke-linecap:round;
}
@keyframes sp-14-draw{
0%{stroke-dashoffset:300;opacity:1}
50%{stroke-dashoffset:0;opacity:1}
100%{stroke-dashoffset:-300;opacity:0}
}
@media (prefers-reduced-motion: reduce){
.sp-14__path{animation:none;stroke-dashoffset:0}
}How this works
An inline SVG contains two paths sharing the same lemniscate (∞) math curve: a faint track path and an animated stroke path. The stroke path has stroke-dasharray:300 (slightly longer than the full path length) and starts at stroke-dashoffset:300 (fully hidden). The sp-14-draw keyframe animates the offset from 300 to 0 (fully drawn) then to -300 (drawn forward past the end, creating a wipe-out), with opacity fading at the end of the cycle to reset cleanly.
A CSS filter:drop-shadow on the SVG element applies a double-layer glow to the entire vector path, which composites cleanly because SVG shapes have defined alpha edges unlike rasterised DOM elements.
Customize
- Change stroke colour via
--c— both the path stroke and drop-shadow inherit the custom property. - Adjust stroke weight by changing
stroke-widthfrom3to5for a bolder infinity symbol. - Change the animation from draw-and-wipe to a simple rotation by wrapping the SVG in a div and applying a CSS rotation animation instead.
- Add a second animated path that runs in reverse (
animation-direction:reverse) at 50% opacity for a bidirectional drawing effect. - Increase
stroke-dasharrayto150and keep the dashoffset animation range the same to show only a partial arc moving around the path.
Watch out for
- The
stroke-dasharrayvalue (300) must be at least as long as the actual SVG path length — measure path length withpath.getTotalLength()in browser DevTools if you change the path shape. - The SVG
viewBoxuses negative offsets (-10 -10 120 60) to prevent the drop-shadow glow from being clipped at the SVG bounds. opacity:0at the end of the cycle can cause a visible flash on the next loop start in some browsers — adding a very shortopacity:0hold at the start of the keyframe (0%–2%) prevents this.
Browser support
| Chrome | Safari | Firefox | Edge |
|---|---|---|---|
| 60+ | 12+ | 60+ | 60+ |
SVG stroke-dashoffset animation is baseline-supported; filter on SVG elements needs Safari 14+ for full fidelity.