25 CSS Spinners18 / 25

Pure CSSMIT licensed

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.

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-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;
  }
}
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: Cyberpunk Segmented Ring Spinner
Source: https://codefronts.com/motion/css-spinner-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

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

Gotchas — read before shipping

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

Techniques used in this demo

clip-pathMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →