Spinner
Um loader CSS é uma animação de carregamento pura em CSS sem JavaScript nem imagens. Comunica ao usuário que algo está acontecendo em segundo plano e é essencial para a percepção de desempenho em aplicações web modernas.
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(124, 111, 255, 0.2);
border-top-color: #7c6fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Um spinner CSS puro usa border com um lado colorido e animation: spin linear infinite. Não requer JavaScript nem imagens.
Para acessibilidade, adicione role="status" e aria-label="Carregando" ao elemento do loader. Considere também prefers-reduced-motion.