25 CSS Spinners 18 / 25

Cyberpunk Segmented Ring Spinner

A yellow dashed outer ring and a magenta inner arc spin in opposite directions around a rotating wireframe diamond core, channelling the segmented HUD aesthetics of cyberpunk UIs.

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-18">
  <div class="sp-18__wrap">
    <div class="sp-18__ring-outer"></div>
    <div class="sp-18__ring-outer-2"></div>
    <div class="sp-18__ring-inner"></div>
    <div class="sp-18__ring-inner-2"></div>
    <div class="sp-18__core"></div>
  </div>
</div>
.sp-18,.sp-18 *,.sp-18 *::before,.sp-18 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-18{
  --bg:#020409;
  --c1:#f7ff00;
  --c2:#ff0080;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-18__wrap{
  position:relative;
  width:88px;
  height:88px;
}
.sp-18__ring-outer{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px dashed var(--c1);
  border-dash-offset:0;
  opacity:0.9;
  box-shadow:0 0 8px var(--c1),inset 0 0 8px rgba(247,255,0,0.1);
  animation:sp-18-cw 1.6s linear infinite;
  clip-path:polygon(50% 0%,100% 0%,100% 100%,50% 100%);
}
.sp-18__ring-outer-2{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px dashed var(--c1);
  opacity:0.5;
  animation:sp-18-cw 1.6s linear infinite;
  animation-delay:-0.8s;
  clip-path:polygon(0% 0%,50% 0%,50% 100%,0% 100%);
}
.sp-18__ring-inner{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:2px solid var(--c2);
  border-right-color:transparent;
  border-bottom-color:transparent;
  box-shadow:0 0 8px var(--c2);
  animation:sp-18-ccw 0.9s linear infinite;
}
.sp-18__ring-inner-2{
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:2px solid var(--c2);
  border-left-color:transparent;
  border-top-color:transparent;
  opacity:0.4;
  animation:sp-18-ccw 0.9s linear infinite;
  animation-delay:-0.45s;
}
.sp-18__core{
  position:absolute;
  inset:32px;
  background:transparent;
  border:1px solid var(--c1);
  transform:rotate(45deg);
  animation:sp-18-cw 2s linear infinite;
  box-shadow:0 0 6px var(--c1);
}
@keyframes sp-18-cw{
  to{transform:rotate(360deg)}
}
@keyframes sp-18-ccw{
  to{transform:rotate(-360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-18__ring-outer,.sp-18__ring-outer-2,.sp-18__ring-inner,.sp-18__ring-inner-2,.sp-18__core{animation:none}
}

How this works

The outer visual impact comes from border:3px dashed var(--c1) with a bright yellow and a distinct clip-path:polygon() halving the ring — two such halves are animated with matching keyframes but opposite delays, making the two dashed semicircles appear to interlock as they rotate. The inner ring uses two opposing-segment arcs with border-left/right-color and border-top/bottom-color pairs styled in magenta.

The centremost element is a diamond shape created by rotating a square 45deg, with only a border visible, spinning slowly on its own axis to add a third speed layer. The resulting multi-speed, multi-colour assembly creates the HUD target-lock visual language of the cyberpunk aesthetic.

Customize

  • Swap --c1 (yellow) and --c2 (magenta) for any two high-contrast neon pairs — electric blue + orange is a common alternate cyberpunk palette.
  • Change the inner ring speed from 0.9s to 0.6s to make the inner mechanic feel more urgent against the slower outer ring.
  • Remove the clip-path halving on the outer dashed rings to show full circles — loses the segmented feel but adds contrast with the inner arcs.
  • Increase the diamond core size from inset:32px to inset:20px for a more prominent reticle centre.
  • Add a scan-line overlay div with a repeating linear-gradient to complete the HUD monitor aesthetic.

Watch out for

  • border-style:dashed renders differently across browsers — Chrome uses square dash caps, Firefox uses slightly rounder ends; this is noticeable on small spinners and may require dash-count tuning.
  • The clip-path:polygon() halving technique creates a hard edge — ensure the wrapper has overflow:visible or the clipped portions may be cut by parent bounds.
  • Stacking 5 simultaneously-animating elements with glow effects can cause paint budget issues on low-end devices; use contain:strict on the wrapper to isolate paint regions.

Browser support

ChromeSafariFirefoxEdge
60+ 13+ 60+ 60+

clip-path polygon and dashed border rendering vary slightly between engines; test visually in each browser.

More from 25 CSS Spinners

Aurora Gradient Orb SpinnerNeon Arc CSS SpinnerDual Counter-Rotate Ring SpinnerDot Chase Orbit SpinnerGradient Conic Sweep SpinnerHeartbeat Pulse LoaderWave Bar Equalizer SpinnerStacked Ring Helix SpinnerMorph Square-to-Circle SpinnerComet Trail CSS SpinnerDNA Double Helix SpinnerFolding Cube Grid Spinner
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →