25 CSS Spinners07 / 25

Pure CSSMIT licensed

Stacked Ring Helix Spinner

Three concentric rings in blue, indigo, and violet spin at alternating speeds and directions, with each ring using different border-side pairs to create a three-axis helix illusion.

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-07">
  <div class="sp-07__helix">
    <div class="sp-07__ring"></div>
    <div class="sp-07__ring"></div>
    <div class="sp-07__ring"></div>
    <div class="sp-07__core"></div>
  </div>
</div>
.sp-07,
.sp-07 *,
.sp-07 *::before,
.sp-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sp-07 {
  --bg: #080c18;
  --c1: #40c4ff;
  --c2: #7986cb;
  --c3: #ce93d8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.sp-07__helix {
  position: relative;
  width: 72px;
  height: 72px;
  transform-style: preserve-3d;
  perspective: 200px;
}

.sp-07__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.sp-07__ring:nth-child(1) {
  border-top-color: var(--c1);
  border-bottom-color: var(--c1);
  filter: drop-shadow(0 0 5px var(--c1));
  animation: sp-07-spin 1.4s linear infinite;
}

.sp-07__ring:nth-child(2) {
  inset: 10px;
  border-left-color: var(--c2);
  border-right-color: var(--c2);
  filter: drop-shadow(0 0 5px var(--c2));
  animation: sp-07-spin 1.4s linear infinite reverse;
  animation-delay: -0.23s;
}

.sp-07__ring:nth-child(3) {
  inset: 20px;
  border-top-color: var(--c3);
  border-bottom-color: var(--c3);
  filter: drop-shadow(0 0 5px var(--c3));
  animation: sp-07-spin 1.4s linear infinite;
  animation-delay: -0.46s;
}

.sp-07__core {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: radial-gradient(var(--c3),transparent);
  opacity: 0.5;
}

@keyframes sp-07-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-07__ring {
    animation: none;
  }
}
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: Stacked Ring Helix Spinner
Source: https://codefronts.com/motion/css-spinner-designs/stacked-ring-helix-spinner/

Three concentric rings in blue, indigo, and violet spin at alternating speeds and directions, with each ring using different border-side pairs to create a three-axis helix illusion.
## HTML
```html
<div class="sp-07">
  <div class="sp-07__helix">
    <div class="sp-07__ring"></div>
    <div class="sp-07__ring"></div>
    <div class="sp-07__ring"></div>
    <div class="sp-07__core"></div>
  </div>
</div>
```
## CSS
```css
.sp-07,
.sp-07 *,
.sp-07 *::before,
.sp-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sp-07 {
  --bg: #080c18;
  --c1: #40c4ff;
  --c2: #7986cb;
  --c3: #ce93d8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.sp-07__helix {
  position: relative;
  width: 72px;
  height: 72px;
  transform-style: preserve-3d;
  perspective: 200px;
}

.sp-07__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.sp-07__ring:nth-child(1) {
  border-top-color: var(--c1);
  border-bottom-color: var(--c1);
  filter: drop-shadow(0 0 5px var(--c1));
  animation: sp-07-spin 1.4s linear infinite;
}

.sp-07__ring:nth-child(2) {
  inset: 10px;
  border-left-color: var(--c2);
  border-right-color: var(--c2);
  filter: drop-shadow(0 0 5px var(--c2));
  animation: sp-07-spin 1.4s linear infinite reverse;
  animation-delay: -0.23s;
}

.sp-07__ring:nth-child(3) {
  inset: 20px;
  border-top-color: var(--c3);
  border-bottom-color: var(--c3);
  filter: drop-shadow(0 0 5px var(--c3));
  animation: sp-07-spin 1.4s linear infinite;
  animation-delay: -0.46s;
}

.sp-07__core {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: radial-gradient(var(--c3),transparent);
  opacity: 0.5;
}

@keyframes sp-07-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-07__ring {
    animation: none;
  }
}
```

How this works

Each ring uses a different combination of transparent border sides: the outer ring colours top and bottom, the middle colours left and right, and the inner colours top and bottom again — but all three are inset at different sizes (inset:0, inset:10px, inset:20px). This makes each ring appear to rotate in a different plane when all three spin simultaneously.

The outer and inner rings share the same clockwise sp-07-spin keyframe while the middle uses animation-direction:reverse. Combined with staggered animation-delay offsets (0, -0.23s, -0.46s), the rings appear to pass through each other in a continuous helical motion.

Make it yours

  • Tune the three ring colours via --c1, --c2, --c3 for brand theming — a gold/silver/copper set creates a metallic gyroscope look.
  • Adjust relative speeds — try outer at 2s, middle at 1.4s, inner at 0.9s for a more complex interference pattern.
  • Add a fourth ring at inset:30px rotating in the same direction as the middle ring to increase visual complexity.
  • Replace filter:drop-shadow with a box-shadow inset and outset pair for a physical ring appearance instead of a neon look.
  • Remove the animation-delay offsets to make all three rings start in-phase — creates a pulsing synchronised effect at certain speed ratios.

Gotchas — read before shipping

  • The "different plane" effect is purely illusory from 2D CSS — the rings are all flat circles; true 3D perspective requires transform-style:preserve-3d and explicit rotateX/Y transforms.
  • Three overlapping rings each with drop-shadow filters can stack filter operations and hurt performance on low-GPU devices — fall back to box-shadow if profiling shows compositing cost.
  • The middle ring's border-left/right-color pair becomes border-top/bottom visually after a 90° rotation — this is expected and intentional but can confuse CSS debuggers.

Browser support

ChromeSafariFirefoxEdge
60+12+60+60+

Fully compatible; no modern-only CSS features used.

Techniques used in this demo

3D transforms (perspective + preserve-3d)filterMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →