Spinner de Carga en CSS Puro

Un elegante indicador de carga (spinner) construido completamente con CSS, sin necesidad de SVGs ni JavaScript. Mediante la combinación de conic-gradient y la propiedad mask (con su prefijo -webkit-mask), logramos una animación sofisticada que traza una estela con un degradado fluido.

Vista previa

Código de Implementación

Integra fácilmente este spinner copiando el siguiente código y añadiéndolo a tus archivos HTML y CSS.

<!-- 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%
  );
  /* Configuración de la máscara para recortar el interior */
  -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);
  }
}

Explicación

• conic-gradient: Genera un degradado rotativo alrededor de un punto central. En este spinner, la estela de rotación se logra transicionando suavemente desde un color transparente (rgba(99, 102, 241, 0)) hasta el color sólido (rgba(99, 102, 241, 1)).
• mask / -webkit-mask: Emplea un radial-gradient a modo de máscara para volver transparente el centro del elemento. El grosor del anillo del spinner (en este caso 6px) se puede ajustar fácilmente modificando el valor en calc(100% - 6px).
• animation: Se define transform: rotate(360deg) dentro de @keyframes y se utiliza la función de timing linear para asegurar una rotación infinita y a velocidad constante.