25 CSS Spinners 09 / 25

Comet Trail CSS Spinner

A conic-gradient comet with a long fading purple tail sweeps around a dark ring, with a bright glowing tip dot that precisely tracks the leading edge of the arc.

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-09">
  <div class="sp-09__wrap">
    <div class="sp-09__spinner">
      <div class="sp-09__comet"></div>
      <div class="sp-09__hole"></div>
      <div class="sp-09__tip"></div>
    </div>
  </div>
</div>
.sp-09,.sp-09 *,.sp-09 *::before,.sp-09 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-09{
  --bg:#030a1a;
  --c:#e040fb;
  --glow:rgba(224,64,251,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-09__wrap{
  position:relative;
  width:80px;
  height:80px;
}
.sp-09__spinner{
  position:absolute;
  inset:0;
  animation:sp-09-spin 1s linear infinite;
}
.sp-09__comet{
  width:100%;
  height:100%;
  border-radius:50%;
  /*
    Bright tip lands at 360deg (= 0deg = 12 o'clock). Tail fades
    BACKWARD (counter-clockwise from the tip) through the 180-360
    range. The 0-180 range is empty so there's a clean gap before
    the tip. Reversing the gradient direction (vs the simpler
    "bright at 0deg, fade to 180deg" layout) makes the tail point
    CCW from the head — correct comet physics for CLOCKWISE
    rotation, where the tail trails behind the direction of motion.
  */
  background:conic-gradient(
    transparent                 0deg,
    transparent               180deg,
    rgba(224,64,251,0.15)     240deg,
    rgba(224,64,251,0.4)      300deg,
    var(--c)                  360deg
  );
  filter:drop-shadow(0 0 4px var(--glow));
}
.sp-09__hole{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--bg);
}
/* Tip at 12-o'clock = 0deg = bright head of the comet. The conic
   disc is 80px with donut hole inset:10px so the ring midline is
   at radius 35 (= 5px from the outer top edge). The tip dot's
   CENTER must land on that midline. translate(-50%, -50%) on
   top:5px + left:50% places the dot center exactly on the ring
   stroke at the 12 o'clock position. */
.sp-09__tip{
  position:absolute;
  top:5px;
  left:50%;
  width:8px;
  height:8px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 10px var(--c),0 0 20px var(--c);
}
@keyframes sp-09-spin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .sp-09__spinner{animation:none}
}

How this works

The comet body is a conic-gradient circle using five stops: a large transparent zone (0–200°) for the empty tail gap, then a graduated fade from near-invisible (rgba(224,64,251,0.15)) to mid (0.4) to full colour (var(--c)) over the last 160°. This makes the leading portion appear as a short bright arc that fades into nothing behind it — the comet effect.

A pseudo-donut hole is cut by layering an identically-coloured child div centred within the ring. The tip dot is an absolutely-positioned small circle at the 12 o'clock position that shares the same sp-09-spin keyframe as the conic disc, keeping it exactly locked to the gradient's brightest point as both rotate together.

Customize

  • Change the comet length by adjusting the first transparent zone end stop from 200deg to 150deg — shorter gap, longer tail.
  • Edit --c to shift the comet colour; all gradient stops and the tip dot inherit the custom property.
  • Add a second comet at animation-delay:-0.5s and a complementary colour for a binary-star orbit effect.
  • Increase the conic disc size from 80px to 120px and adjust the hole inset proportionally for a ring suitable for page-level loading states.
  • Change linear timing to cubic-bezier(0.4,0,0.6,1) for a pulsing acceleration / deceleration on the comet orbit.

Watch out for

  • conic-gradient requires Chrome 69+, Safari 12.1+, Firefox 83+ — the comet appearance degrades to a solid colour disc in older browsers, so always test browser matrix.
  • The donut-hole technique breaks on non-solid backgrounds; use a CSS mask-image approach if the spinner must render over a photo or gradient background.
  • The tip dot's position (top:4px;left:50%) is hard-coded to the 80px wrapper — recalculate as wrapper/2 - stroke/2 - dot/2 if you resize the ring.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

conic-gradient required for the comet tail effect; degrades to solid disc on older browsers.

More from 25 CSS Spinners

DNA Double Helix SpinnerFolding Cube Grid SpinnerRipple Pulse Ring SpinnerClock Tick Sweep SpinnerInfinity Loop Stroke SpinnerBouncing Elastic Dots SpinnerSpiral Galaxy CSS SpinnerGlassmorphism Loader SpinnerCyberpunk Segmented Ring SpinnerBreathing Circle LoaderParticle Scatter Burst SpinnerRetro TV Static Noise Loader
View the full collection →

Search CodeFronts

Loading…

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