25 CSS Spinners09 / 25

Pure CSSMIT licensed

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.

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

Make it yours

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

Gotchas — read before shipping

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

Techniques used in this demo

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

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →