The classic CSS spinner uses border-top-color: transparent with a rotating animation. It works, but it always looks a little crude — sharp corners, hard transitions.

conic-gradient plus mask gives you a smooth, fading-tail spinner with one div.

.spinner {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, #ed143d);
  mask: radial-gradient(circle, transparent 55%, black 56%);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

The conic-gradient paints a circular sweep from transparent to your accent color. The mask punches out the centre to leave just the ring. Combine that with a steady rotation and you get a clean trailing-fade loader.

Result


The two numbers in radial-gradient(circle, transparent 55%, black 56%) control the ring thickness. Move them closer to 0% for a fatter ring, closer to 100% for a thinner one.

Swap the colour stop and you can change the accent to anything — match it to your brand, your loading state, your dark mode. All from one CSS file, no SVG required.