20 CSS Loaders 11 / 20

CSS Neon Arc Spinner

Five glowing neon CSS spinners — a single neon ring, double counter-rotating neon, multi-arc intersecting glow, neon orbiting dot, and a conic comet — styled for dark 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="ld-11">
  <div class="ld-11__stage">
    <div class="ld-11__cell"><div class="ld-11__neon"></div><span class="ld-11__label">Neon Ring</span></div>
    <div class="ld-11__cell"><div class="ld-11__double-neon"><span></span><span></span></div><span class="ld-11__label">Double Neon</span></div>
    <div class="ld-11__cell"><div class="ld-11__arcs"><span></span><span></span><span></span></div><span class="ld-11__label">Neon Arcs</span></div>
    <div class="ld-11__cell"><div class="ld-11__orbit-neon"><i></i></div><span class="ld-11__label">Neon Orbit</span></div>
    <div class="ld-11__cell"><div class="ld-11__comet-neon"></div><span class="ld-11__label">Neon Comet</span></div>
  </div>
.ld-11,.ld-11 *,.ld-11 *::before,.ld-11 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-11{
  --bg:#06000f;--c1:#bf00ff;--c2:#00f5ff;--c3:#ff6600;--c4:#39ff14;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-11__stage{display:flex;gap:60px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-11__cell{display:flex;flex-direction:column;align-items:center;gap:20px}
.ld-11__label{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Neon ring */
.ld-11__neon{width:70px;height:70px;border-radius:50%;border:3px solid transparent;border-top-color:var(--c1);box-shadow:0 0 12px var(--c1),inset 0 0 12px rgba(191,0,255,.1);animation:ld-11-spin 1s linear infinite}
@keyframes ld-11-spin{to{transform:rotate(360deg)}}

/* Double neon */
.ld-11__double-neon{width:70px;height:70px;position:relative}
.ld-11__double-neon span{position:absolute;border-radius:50%;border:3px solid transparent;animation:ld-11-spin linear infinite}
.ld-11__double-neon span:nth-child(1){inset:0;border-top-color:var(--c2);box-shadow:0 0 14px var(--c2);animation-duration:1s}
.ld-11__double-neon span:nth-child(2){inset:10px;border-bottom-color:var(--c1);box-shadow:0 0 10px var(--c1);animation-duration:1.5s;animation-direction:reverse}

/* Neon arc segments */
.ld-11__arcs{width:70px;height:70px;position:relative}
.ld-11__arcs span{position:absolute;border-radius:50%;border:3px solid transparent;animation:ld-11-spin linear infinite}
.ld-11__arcs span:nth-child(1){inset:0;border-top-color:var(--c3);box-shadow:0 0 12px var(--c3);animation-duration:.8s}
.ld-11__arcs span:nth-child(2){inset:0;border-right-color:var(--c3);box-shadow:0 0 12px var(--c3);animation-duration:.8s}
.ld-11__arcs span:nth-child(3){inset:16px;border-bottom-color:var(--c4);box-shadow:0 0 10px var(--c4);animation-duration:1.2s;animation-direction:reverse}

/* Neon orbit */
.ld-11__orbit-neon{width:70px;height:70px;position:relative;display:flex;align-items:center;justify-content:center}
.ld-11__orbit-neon::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--c1);box-shadow:0 0 15px var(--c1),0 0 30px var(--c1);animation:ld-11-spin 1.2s linear infinite;position:absolute;top:0;left:50%;transform:translateX(-50%);transform-origin:35px 35px}
.ld-11__orbit-neon::after{content:'';position:absolute;width:64px;height:64px;border-radius:50%;border:1px solid rgba(191,0,255,.2);box-shadow:0 0 8px rgba(191,0,255,.15)}
.ld-11__orbit-neon i{width:6px;height:6px;border-radius:50%;background:var(--c2);box-shadow:0 0 10px var(--c2)}

/* Comet neon */
.ld-11__comet-neon{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 60%,var(--c4));-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);animation:ld-11-spin 1.2s linear infinite;filter:drop-shadow(0 0 6px var(--c4))}

@media(prefers-reduced-motion:reduce){
  .ld-11__neon,.ld-11__double-neon span,.ld-11__arcs span,.ld-11__orbit-neon::before,.ld-11__comet-neon{animation:none}
}

How this works

The neon ring is a standard border-top-color spinner with box-shadow added at both the outer level (0 0 12px var(--c1)) and inner level (inset 0 0 12px rgba()). The glow persists through the rotation because box-shadow is computed relative to the element's own geometry, not its transform. The double neon stacks two absolutely positioned spans — the outer spins forward while the inner has animation-direction:reverse — with different colours and radii to create interlocking arcs that never collide.

The neon orbit uses a single dot element placed at top:0; left:50%; transform:translateX(-50%) with transform-origin set to the centre of the parent container, so the dot walks in a circle around the ring. The conic comet replaces border animation entirely with a conic-gradient(transparent 60%, var(--c4)) masked by -webkit-mask radial gradient and filtered with drop-shadow for a diffuse glow tail.

Customize

  • Increase glow intensity by raising box-shadow spread from 12px to 24px — on very dark backgrounds this creates a visible bloom effect.
  • Change the counter-rotation speed ratio of the double neon — currently 1s / 1.5s; try 1s / 1s for synchronised contra-rotation or 1s / 4s for a slow inner drift.
  • Add a third neon ring at inset:20px with a third colour by duplicating span:nth-child(3) inside .ld-11__double-neon.
  • Adjust the comet tail length by changing the transparent stop in conic-gradient(transparent 60%, ...) — lower percentages create a longer visible arc.
  • Use filter: drop-shadow(0 0 8px var(--c1)) on the spinner container for a bloom that extends beyond the element boundary, useful for floating loader badges.

Watch out for

  • box-shadow on rotating elements is re-composited every frame on some browsers — benchmark with DevTools if adding multiple glowing spinners to a single view.
  • The conic-gradient comet requires -webkit-mask for Safari; without it, the entire circle fills with the gradient colour and the tail disappears.
  • transform-origin on the orbit dot must reference the parent container's centre, not the dot itself — calculate as half the parent's width/height in px for reliability.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

Conic-gradient and -webkit-mask require Safari 12.1+; the neon ring variants work in all modern browsers.

More from 20 CSS Loaders

CSS Orbit Planet LoaderCSS Typing Dots LoaderCSS Staircase Step LoaderCSS Infinity Loop LoaderCSS Gradient Conic SpinnerCSS Particle Burst LoaderCSS Spinning Ring LoaderCSS Dot Chase LoaderCSS Skeleton Screen LoaderCSS Progress Bar LoaderCSS Bouncing Balls LoaderCSS DNA Helix Loader
View the full collection →

Search CodeFronts

Loading…

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