20 CSS Loaders 19 / 20

CSS Gradient Conic Spinner

Six conic-gradient CSS spinners — rainbow sweep, sunset arc, dual-sweep, thick gradient arc, nested concentric conics, and a glowing comet — demonstrating the full expressive range of conic-gradient masking.

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-19">
  <div class="ld-19__stage">
    <div class="ld-19__cell"><div class="ld-19__rainbow"></div><span class="ld-19__label">Rainbow Conic</span></div>
    <div class="ld-19__cell"><div class="ld-19__sunset"></div><span class="ld-19__label">Sunset Arc</span></div>
    <div class="ld-19__cell"><div class="ld-19__dual-sweep"></div><span class="ld-19__label">Dual Sweep</span></div>
    <div class="ld-19__cell"><div class="ld-19__thick"></div><span class="ld-19__label">Thick Arc</span></div>
    <div class="ld-19__cell"><div class="ld-19__nested"><span></span><span></span><span></span></div><span class="ld-19__label">Nested Conic</span></div>
    <div class="ld-19__cell"><div class="ld-19__glow"></div><span class="ld-19__label">Glow Conic</span></div>
  </div>
.ld-19,.ld-19 *,.ld-19 *::before,.ld-19 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-19{
  --bg:#0a0a0a;--c1:#ff6b6b;--c2:#ffd93d;--c3:#6bcb77;--c4:#4d96ff;--c5:#c77dff;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;
}
.ld-19__stage{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;padding:40px}
.ld-19__cell{display:flex;flex-direction:column;align-items:center;gap:18px}
.ld-19__label{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* Rainbow conic */
.ld-19__rainbow{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c1));animation:ld-19-spin 1s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0)}
@keyframes ld-19-spin{to{transform:rotate(360deg)}}

/* Sunset conic */
.ld-19__sunset{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 30%,#ff6b6b,#ffd93d,transparent 70%);animation:ld-19-spin 1.5s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0)}

/* Dual-sweep */
.ld-19__dual-sweep{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--c4) 0deg,transparent 120deg,var(--c5) 180deg,transparent 300deg,var(--c4) 360deg);animation:ld-19-spin 1.2s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0)}

/* Thick gradient arc */
.ld-19__thick{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 20%,var(--c3),#4d96ff,transparent 80%);animation:ld-19-spin 2s ease-in-out infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#000 0)}

/* Nested conic */
.ld-19__nested{width:70px;height:70px;position:relative}
.ld-19__nested span{position:absolute;border-radius:50%;background:conic-gradient(transparent 70%,currentColor);animation:ld-19-spin linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0)}
.ld-19__nested span:nth-child(1){inset:0;color:var(--c1);animation-duration:1s}
.ld-19__nested span:nth-child(2){inset:10px;color:var(--c3);animation-duration:1.5s;animation-direction:reverse}
.ld-19__nested span:nth-child(3){inset:20px;color:var(--c4);animation-duration:2s}

/* Glow conic */
.ld-19__glow{width:70px;height:70px;border-radius:50%;background:conic-gradient(transparent 40%,var(--c5),white,var(--c5),transparent 60%);animation:ld-19-spin 1.5s linear infinite;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);filter:drop-shadow(0 0 6px var(--c5))}

@media(prefers-reduced-motion:reduce){
  .ld-19__rainbow,.ld-19__sunset,.ld-19__dual-sweep,.ld-19__thick,.ld-19__nested span,.ld-19__glow{animation:none}
}

How this works

Every spinner in this collection uses the same underlying technique: a conic-gradient applied to a full circle element, masked by a -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - Npx), #000 0) to cut out the inner circle and leave only the ring. The mask thickness is controlled by the Npx value — larger values create thicker arcs. The element then rotate(360deg)s linearly, spinning the conic-gradient around the ring.

The rainbow variant uses all five CSS custom property colours spread evenly in the gradient stops. The sunset variant has a transparent 30% leading region so only 70% of the ring is visible, creating a comet-style sweep. The nested conic stacks three ring elements at different radii, alternating spin direction with animation-direction: reverse on the middle ring. The glow variant adds a filter: drop-shadow() to the spinner container for a bloom effect.

Customize

  • Change ring thickness by editing the calc(100% - 6px) value in the mask — calc(100% - 12px) gives a thick band; calc(100% - 2px) is a hairline.
  • Increase the visible arc by reducing the transparent stop — conic-gradient(transparent 10%, var(--c1)) shows 90% of the ring filled.
  • Add a hard edge to the sweep by replacing transparent with a second colour stop at the same position: conic-gradient(#0000 0deg, #0000 60deg, var(--c1) 60deg).
  • Reverse the glow direction by changing drop-shadow(0 0 6px var(--c5)) to drop-shadow(0 0 12px white) for a white-hot bloom effect.
  • Combine two conic-gradient elements at different sizes and speeds with mix-blend-mode: screen on a dark background for a psychedelic light-beam effect.

Watch out for

  • -webkit-mask with radial-gradient is required for the ring cutout in Safari; without it the entire circle fills with the gradient colour.
  • Conic-gradient at position syntax (e.g. conic-gradient(at 50% 50%, ...)) is not needed for centred gradients — omitting it defaults to centre and improves cross-browser reliability.
  • The nested conic's three rings use position:absolute with different inset values — ensure the parent has position:relative and explicit dimensions so nested rings centre correctly.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

Conic-gradient requires Chrome 69+, Safari 12.1+, Firefox 83+; older browsers see a blank spinner.

More from 20 CSS Loaders

CSS Wave Bars Audio LoaderCSS Morphing Square LoaderCSS Orbit Planet LoaderCSS Typing Dots LoaderCSS Staircase Step LoaderCSS Infinity Loop LoaderCSS Particle Burst LoaderCSS Spinning Ring LoaderCSS Dot Chase LoaderCSS Skeleton Screen LoaderCSS Progress Bar LoaderCSS Bouncing Balls Loader
View the full collection →

Search CodeFronts

Loading…

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