Categoría: Desarrollo
Generador de spinners de carga CSS
Diseña indicadores de carga CSS ligeros en local y copia el código
Crea spinners de carga solo con CSS y vista previa en vivo. Ajusta tamaño, color, grosor y velocidad, y copia los fragmentos de HTML y CSS. Sin JavaScript ni imágenes.
Vista previa
<span class="loader" role="status" aria-label="Cargando…"></span>
.loader {
display: inline-block;
box-sizing: border-box;
width: 40px;
height: 40px;
border: 4px solid #dfe4de;
border-top-color: #2f6f4f;
border-radius: 50%;
animation: loader-spin 0.9s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.loader,
.loader span {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
Cada fragmento anima solo transform y opacity, y termina con un bloque prefers-reduced-motion para que la animación se detenga con quien ha pedido a su sistema reducir el movimiento.
Sin JavaScript, sin imágenes, sin fuentes web, y nada sale de tu navegador.
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Un indicador de carga es uno de los pocos sitios donde unas líneas de CSS ganan de calle a una biblioteca: no hay script que cargar, ni imagen que pedir, ni nada que inicializar antes de aquello que estás esperando. Estas cinco plantillas —anillo, anillo doble, puntos, barras y pulso— animan solo `transform` y `opacity`, así que el navegador puede ejecutarlas en el compositor en vez de recalcular el diseño en cada fotograma. Cada fragmento termina con un bloque `prefers-reduced-motion`, porque un spinner es decoración y quien ha pedido a su sistema que deje de mover cosas no tiene por qué quedarse mirándolo. El marcado es un `<span role="status">` con etiqueta, para que un lector de pantalla anuncie la espera en vez de encontrar una caja vacía.
Cómo se usa
- Elige una plantilla y ajusta tamaño, grosor, velocidad y colores.
- Cambia el nombre de la clase si pudiera chocar con tu hoja de estilos.
- Copia el HTML y el CSS en tu proyecto.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Los spinners son solo CSS?
- Sí. Cada uno es un span (con unos cuantos spans hijos vacíos en las plantillas de puntos y barras) más una animación CSS. No hay JavaScript, ni SVG, ni imagen, ni fuente web.
- ¿Necesito JavaScript para ejecutarlos?
- No. La animación arranca en cuanto el elemento está en el documento. Solo necesitas código para decidir cuándo mostrarlo y ocultarlo.
- ¿Puedo cambiar la velocidad y el color?
- Sí: el tamaño, el grosor del trazo, la duración de la animación, el color principal y el color de la pista son controles de esta página y se escriben directamente en el fragmento que copias.
- ¿Y quienes prefieren menos movimiento?
- Cada fragmento generado termina con una media query prefers-reduced-motion que detiene la animación en la práctica, así que el indicador sigue apareciendo pero no gira para quien ha reducido el movimiento en su sistema.
- ¿El código se genera en local?
- Sí. Los ajustes, la vista previa y los fragmentos generados se quedan en tu navegador; no se sube nada.