Generador de indicadores de carga CSS Genera indicadores de carga y cargadores animados personalizables con estilos CSS.

Los indicadores de carga CSS utilizan animaciones @keyframes para crear un movimiento continuo. La técnica del spinner de borde utiliza un elemento circular con un borde transparente en la mayoría de los lados y un borde coloreado en uno, luego lo rota 360 grados. La animación de puntos utiliza transformaciones de escala para crear un efecto de rebote con retrasos de animación escalonados. La animación de pulso escala un elemento desde 0 a 1 mientras desvanece la opacidad. Todas las animaciones utilizan animation: name duration timing-function iteration-count. Establecer iteration-count en infinito garantiza un bucle continuo. La función de temporización de animación (ease, linear, ease-in-out) controla la curva de velocidad. Para la accesibilidad, agregue role="status" y una etiqueta aria a los indicadores. Considere utilizar la consulta de medios prefers-reduced-motion para deshabilitar o reducir las animaciones para los usuarios que prefieren una motion reducida.