Spinner de Carregamento em CSS Puro

Um spinner de carregamento contemporâneo construído inteiramente com CSS, dispensando imagens ou JavaScript. A combinação de conic-gradient e mask (ou -webkit-mask) resulta em uma animação sofisticada que desenha uma trilha de gradiente fluida.

Pré-visualização

Código de Implementação

Basta copiar o código abaixo e colá-lo nos seus arquivos HTML e CSS para incorporar o spinner.

<!-- 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%
  );
  /* Configuração de máscara para recortar o 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);
  }
}

Explicação

• conic-gradient: Cria um gradiente de cores que varia ao longo de uma circunferência a partir de um ponto central. Neste spinner, a transição suave de um tom transparente (rgba(99, 102, 241, 0)) para uma cor sólida (rgba(99, 102, 241, 1)) é o que simula o traço em rotação.
• mask / -webkit-mask: Utiliza um radial-gradient como máscara para tornar o centro do elemento transparente. A expressão calc(100% - 6px) permite ajustar a espessura da linha do spinner (neste caso, 6px).
• animation: O @keyframes define transform: rotate(360deg) aliado a uma função de timing linear, assegurando uma rotação infinita e em velocidade constante.