25 CSS Spinners 04 / 25

Gradient Conic Sweep Spinner

A conic-gradient disk sweeps through deep violet-to-cyan colours with a transparent cutout tail, creating a smooth colour-wheel spinner with a bright leading-edge tip.

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-04">
  <div class="sp-04__wrap">
    <div class="sp-04__spinner">
      <div class="sp-04__conic"></div>
      <div class="sp-04__hole"></div>
      <div class="sp-04__tip"></div>
    </div>
  </div>
</div>

<div class="sp-04">
  <div class="sp-04__wrap">
    <div class="sp-04__spinner">
      <div class="sp-04__conic"></div>
      <div class="sp-04__hole"></div>
      <div class="sp-04__tip"></div>
    </div>
  </div>
</div>

.sp-04,.sp-04 *,.sp-04 *::before,.sp-04 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-04{
  --bg:#050510;
  --c1:#00e5ff;
  --c2:#1976d2;
  --c3:#6200ea;
  --hole:#050510;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-04__wrap{
  position:relative;
  width:80px;
  height:80px;
}
.sp-04__spinner{
  position:absolute;
  inset:0;
  animation:sp-04-spin 1s linear infinite;
}
.sp-04__conic{
  width:100%;
  height:100%;
  border-radius:50%;
  /*
    Bright cyan tip lands at 360deg (= 0deg = 12 o'clock). Arc fades
    BACKWARD (counter-clockwise from the tip): purple → blue → cyan
    arriving at the tip. Transparent gap from 0-60deg = clean cutoff
    after the tip in the rotation direction. Tail points CCW from
    head = correct comet physics for CLOCKWISE rotation (tail trails
    behind the direction of motion). Same direction as Demo 09 so
    they read consistently.
  */
  background:conic-gradient(
    transparent   0deg,
    transparent  60deg,
    var(--c3)   120deg,
    var(--c2)   240deg,
    var(--c1)   360deg
  );
  filter:drop-shadow(0 0 6px var(--c1));
}
.sp-04__hole{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--hole);
}
/* Tip at 12-o'clock (0deg) = exact bright start of the arc. The
   conic disc is 80px and the donut hole is inset:10px so the ring
   spans outer-radius 40 → inner-radius 30 → midline at radius 35
   (= 5px from the outer top edge). The tip dot's CENTER must land
   on that midline, so we offset the 10x10 dot up by half its size
   via the translateY(-50%) trick. left:50% + translateX(-50%)
   centers it horizontally on the same axis. */
.sp-04__tip{
  position:absolute;
  top:5px;
  left:50%;
  width:10px;
  height:10px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--c1);
  box-shadow:0 0 12px var(--c1),0 0 24px var(--c1);
}
@keyframes sp-04-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-04__spinner{animation:none}
}

.sp-04,.sp-04 *,.sp-04 *::before,.sp-04 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-04{
  --bg:#050510;
  --c1:#00e5ff;
  --c2:#1976d2;
  --c3:#6200ea;
  --hole:#050510;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-04__wrap{
  position:relative;
  width:80px;
  height:80px;
}
.sp-04__spinner{
  position:absolute;
  inset:0;
  animation:sp-04-spin 1s linear infinite;
}
.sp-04__conic{
  width:100%;
  height:100%;
  border-radius:50%;
  /*
    Bright cyan tip lands at 360deg (= 0deg = 12 o'clock). Arc fades
    BACKWARD (counter-clockwise from the tip): purple → blue → cyan
    arriving at the tip. Transparent gap from 0-60deg = clean cutoff
    after the tip in the rotation direction. Tail points CCW from
    head = correct comet physics for CLOCKWISE rotation (tail trails
    behind the direction of motion). Same direction as Demo 09 so
    they read consistently.
  */
  background:conic-gradient(
    transparent   0deg,
    transparent  60deg,
    var(--c3)   120deg,
    var(--c2)   240deg,
    var(--c1)   360deg
  );
  filter:drop-shadow(0 0 6px var(--c1));
}
.sp-04__hole{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--hole);
}
/* Tip at 12-o'clock (0deg) = exact bright start of the arc. The
   conic disc is 80px and the donut hole is inset:10px so the ring
   spans outer-radius 40 → inner-radius 30 → midline at radius 35
   (= 5px from the outer top edge). The tip dot's CENTER must land
   on that midline, so we offset the 10x10 dot up by half its size
   via the translateY(-50%) trick. left:50% + translateX(-50%)
   centers it horizontally on the same axis. */
.sp-04__tip{
  position:absolute;
  top:5px;
  left:50%;
  width:10px;
  height:10px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--c1);
  box-shadow:0 0 12px var(--c1),0 0 24px var(--c1);
}
@keyframes sp-04-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-04__spinner{animation:none}
}

How this works

The spinner disc is a single border-radius:50% element styled with conic-gradient — three colour stops from deep purple through royal blue to cyan, followed by a transparent zone from 300° to 360° to create the open tail. Rotating this element with sp-04-spin at 1s linear infinite makes the gradient appear to sweep.

A centred child div with the same background colour as the page creates the hollow-ring illusion (pseudo-donut). The bright white-cyan tip dot sits at top:5px;left:50% and shares the same keyframe, so it always orbits exactly at the leading edge of the colour arc.

Customize

Widen the tail by changing the transparent zone from 300deg to 260deg — shorter arc, longer invisible gap.
Edit the three gradient stops to any brand hue sequence; the sweep effect works with any conic-gradient range.
Add a second, slower counter-rotating conic spinner at 50% opacity behind the first for a woven-light effect.
Change --hole to a semi-transparent colour and the spinner becomes a solid disc with a gradient fade instead of a ring.
Increase the tip dot size to 14px and add filter:blur(2px) for a softer leading comet head.

Watch out for

conic-gradient requires Chrome 69+, Safari 12.1+, Firefox 83+ — always provide a plain border-based spinner as fallback for environments that block modern CSS.
The "donut hole" uses a child element matching the page background — this breaks over images or gradients; use mask-image:radial-gradient(transparent 48%,black 49%) instead for composable contexts.
The tip dot's top:5px;left:50% offset is sized for the default 80px container; recalculate if you change the wrapper size.

Browser support

Chrome	Safari	Firefox	Edge
69+	12.1+	83+	69+

conic-gradient support required; older browsers need a fallback border-based spinner.

More from 25 CSS Spinners

Progress Arc Fill Spinner Matrix Rain Column Spinner Aurora Gradient Orb Spinner Neon Arc CSS Spinner Dual Counter-Rotate Ring Spinner Dot Chase Orbit Spinner Heartbeat Pulse Loader Wave Bar Equalizer Spinner Stacked Ring Helix Spinner Morph Square-to-Circle Spinner Comet Trail CSS Spinner DNA Double Helix Spinner

View the full collection →