Spinner
Un loader CSS es una animación de carga pura en CSS sin JavaScript ni imágenes. Comunica al usuario que algo está sucediendo en segundo plano y es esencial para la percepción del rendimiento en aplicaciones 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); }
}
Un spinner CSS puro usa border con un lado coloreado y animation: spin linear infinite. No requiere JavaScript ni imágenes.
Para accesibilidad, añade role="status" y aria-label="Cargando" al elemento del loader. Considera también prefers-reduced-motion para usuarios sensibles al movimiento.
Muestra un loader cuando una operación tarda más de 300ms. Para operaciones más cortas, un loader puede parecer un parpadeo innecesario. Para operaciones muy largas (+10s), considera una barra de progreso con porcentaje.