25 CSS Spinners 07 / 25

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.

Pure CSS MIT licensed

Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

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>

<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}
}

.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.

Customize

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.

Watch out for

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

Chrome	Safari	Firefox	Edge
60+	12+	60+	60+

Fully compatible; no modern-only CSS features used.

More from 25 CSS Spinners

Particle Scatter Burst Spinner Retro TV Static Noise Loader Liquid Blob CSS Spinner Progress Arc Fill Spinner Matrix Rain Column Spinner Aurora Gradient Orb Spinner Neon Arc CSS Spinner Dual Counter-Rotate Ring Spinner Dot Chase Orbit Spinner Gradient Conic Sweep Spinner Heartbeat Pulse Loader Wave Bar Equalizer Spinner

View the full collection →