Loaders
Loaders en CSS puro, ordenados por estilo: haz clic para copiar el código
1–24 de 182
Acerca de la herramienta
Esta galería ofrece 182 indicadores de carga escritos en HTML y CSS puro, sin JavaScript ni imágenes. Están repartidos en dieciocho categorías, entre ellas spinners, puntos, barras, progreso, pulsación, órbitas, ondas, 3D, glitch y texto. Sirven para indicar la espera de una respuesta de API, la carga de una página o el envío de un formulario, con una animación que encaja en tu interfaz.
Todos los loaders siguen la propiedad CSS color, lo que facilita adaptarlos a tu tema. El color elegido en la herramienta se añade al principio del CSS copiado, sobre el elemento principal del loader. Las animaciones usan keyframes con el prefijo mwb- para reducir los choques de nombres con las de tu proyecto. La galería muestra 24 modelos por página.
Cómo usarla
- Elige una categoría, o Todos para recorrer el conjunto de loaders.
- Ajusta el Color para ver las vistas previas en tu tono.
- Haz clic en un loader para abrir su código.
- Pulsa Copiar el HTML y Copiar el CSS, y pega el HTML donde se muestra la carga y el CSS en tu hoja de estilos.
Preguntas frecuentes
¿Estos loaders necesitan JavaScript?
No, la animación es totalmente CSS. En tu aplicación, el JavaScript solo hace falta para mostrar el loader mientras algo se carga y ocultarlo después, por ejemplo añadiendo o quitando el elemento del DOM.
¿Cómo cambio el color de un loader ya copiado?
Los loaders usan currentColor. Cambia la propiedad color en la primera regla del CSS copiado, o en un elemento padre, y toda la animación adopta el nuevo color sin más cambios.
¿Funcionan los loaders sobre fondo claro?
Las vistas previas se muestran sobre fondo oscuro, pero los loaders no dependen de él: basta con elegir un color con suficiente contraste respecto al de tu página, por ejemplo un gris oscuro sobre blanco.
¿Con qué licencia se publican?
Los loaders forman parte del código de MagicWebBox, un proyecto de código abierto publicado con licencia MIT. Puedes reutilizarlos, también en proyectos comerciales, siempre que respetes las condiciones de esa licencia.