25 CSS Spinners14 / 25

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

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>
.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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Spinner from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Infinity Loop Stroke Spinner
Source: https://codefronts.com/motion/css-spinner-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

  • Change stroke colour via --c — both the path stroke and drop-shadow inherit the custom property.
  • Adjust stroke weight by changing stroke-width from 3 to 5 for 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-dasharray to 150 and keep the dashoffset animation range the same to show only a partial arc moving around the path.

Gotchas — read before shipping

  • The stroke-dasharray value (300) must be at least as long as the actual SVG path length — measure path length with path.getTotalLength() in browser DevTools if you change the path shape.
  • The SVG viewBox uses negative offsets (-10 -10 120 60) to prevent the drop-shadow glow from being clipped at the SVG bounds.
  • opacity:0 at the end of the cycle can cause a visible flash on the next loop start in some browsers — adding a very short opacity:0 hold at the start of the keyframe (0%–2%) prevents this.

Browser support

ChromeSafariFirefoxEdge
60+12+60+60+

SVG stroke-dashoffset animation is baseline-supported; filter on SVG elements needs Safari 14+ for full fidelity.

Techniques used in this demo

filterMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →