Pure CSS Loading Spinner

This modern loading spinner is built entirely with CSS, requiring zero images or JavaScript. By cleverly combining conic-gradient with mask (and -webkit-mask), it produces a stylish, high-performance animation featuring a smooth, trailing gradient.

Preview

Implementation Code

To integrate this spinner into your project, simply copy the HTML and CSS snippets below.

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* Mask configuration to cut out the inside */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

Explanation

• conic-gradient: Generates a gradient that sweeps around a central point. For this spinner, it creates the illusion of a rotating trail by smoothly transitioning from fully transparent (rgba(99, 102, 241, 0)) to a solid, opaque color (rgba(99, 102, 241, 1)).
• mask / -webkit-mask: Utilizes a radial-gradient to mask out the center of the element, rendering it transparent. The stroke thickness of the spinner (set to 6px here) can be easily customized by adjusting the calc(100% - 6px) value.
• animation: Applies an infinite, linear rotation (transform: rotate(360deg)) defined via @keyframes, ensuring a perfectly continuous and steady spin.