20 CSS Loaders19 / 20

Pure CSSMIT licensed

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.

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="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;
  }
}
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 Loader 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: CSS Gradient Conic Spinner
Source: https://codefronts.com/motion/css-loader-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

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

Gotchas — read before shipping

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

Techniques used in this demo

conic-gradient()MDN ↗filterMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →