Generador de indicadores de carga CSS

Por Bogdan Sandu (EN) · Publicado el 9 de junio de 2025 · Última actualización 14 de septiembre de 2026

Este generador de indicadores de carga en CSS escribe el CSS de una animación de carga para que no tengas que programar los fotogramas clave a mano. Elige un indicador, ajusta tres controles y copia el resultado. Todos los indicadores usan únicamente CSS: sin JavaScript, imágenes ni dependencias.

Lo que puedes configurar:

• Tipo de cargador: Girador, Puntos, Pulso, Onda, Anillo, Cuadrícula, Corazón, Barra de progreso, Shuriken, Barra ondulada, Hipnótico o Voltear cuadrado
• Tamaño de 20px a 100px
• Color de un selector de color, aplicado a la parte móvil del cargador
• Velocidad de 0,5xa 2x, que divide la duración de la animación

La vista previa se actualiza a medida que arrastra los controles deslizantes y el panel de código se reescribe al mismo tiempo. Cada cargador anima transform o opacity, excepto la barra de progreso, que anima background-position.

Cómo utilizar este generador de cargador CSS

1. Elige un tipo de cargador del menú desplegable y mire la vista previa.
2. Establece el tamaño y elige un color. El color va en el borde giratorio, los puntos, las barras o el relleno, según el cargador.
3. Arrastra el control deslizante de velocidad. Los valores superiores a 1x acortan el bucle, los valores inferiores a 1x lo alargan.
4. Haz clic en Copiar y pegue CSS en tu hoja de estilo.
5. Agregue un elemento con la clase coincidente donde debería aparecer el cargador. El nombre de la clase es custom_loader_ seguido del tipo.

El HTML para once de los doce cargadores es un único elemento vacío:

<div class="custom_loader_spinner" role="status" aria-label="Loading"></div>

Bar Wave es la excepción. Su CSS apunta a cinco elementos secundarios, por lo que necesita este marcado:

<div class="custom_loader_bar-wave" role="status" aria-label="Loading">
  <div></div><div></div><div></div><div></div><div></div>
</div>

Con la configuración predeterminada, el Spinner produce esto CSS:

.custom_loader_spinner {
  width: 40px;
  height: 40px;
  position: relative;
}

.custom_loader_spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: custom_spin 1s infinite linear;
}

@keyframes custom_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Los dos bloques comparten un selector a propósito. El primero establece el cuadro, el segundo establece la apariencia y puede fusionarlos una vez que el código esté en tu proyecto.

Lo que la herramienta no hace

• Copia solo CSS. El HTML anterior no está en el panel de códigos, así que mantenga esta página abierta o anote el nombre de la clase.
• El color de la pista del Spinner y el Ring, y el gris claro en la barra de progreso, están fijos en #f3f3f3. Cámbialos a mano por fondos oscuros.
• No hay salida SCSS o Tailwind, ni exportación GIF o SVG.
• No agrega atributos de accesibilidad ni reglas de movimiento reducido. Agregue role="status" como se muestra arriba y una consulta de medios como esta:

@media (prefers-reduced-motion: reduce) {
  .custom_loader_spinner {
    animation-duration: 3s;
  }
}

Reducir la velocidad del bucle mantiene la señal de "aún cargando" mientras se elimina la mayor parte del movimiento. La consulta prefiere-movimiento-reducido (EN) es compatible con todos los navegadores actuales.

¿Qué es un generador de cargador CSS?

Un generador de cargador CSS es una herramienta basada en navegador que produce código de animación listo para usar CSS para cargar indicadores, sin fotogramas clave escritos a mano.

La salida es pura CSS (EN), no un archivo de video o una secuencia de imágenes, por lo que no hay nada que renderizar en un servidor o cargar como un recurso separado.

La mayoría de las herramientas funcionan de la misma manera debajo. Usted elige un estilo, arrastra algunos controles deslizantes y una vista previa en vivo se actualiza en tiempo real mientras el panel lateral escribe el código real.

• Qué reemplaza: escribir manualmente bloques @keyframes y calcular ángulos de rotación o pasos de opacidad a mano
• Lo que no es: una biblioteca de animaciones JavaScript, un marco de interfaz de usuario completo o un reproductor de vídeo

La gente suele probar uno primero, modificar los valores y luego copiar el fragmento final directamente en un proyecto.

¿Qué tipos de animaciones del cargador CSS puedes generar?

La mayoría de los generadores clasifican su salida en seis familias reconocibles: hilanderos, puntos, barras, pulsos, anillos y esqueletos.

Las animaciones se encuentran entre las funciones CSS más utilizadas. Los cargadores son uno de los primeros lugares a los que recurren la mayoría de los desarrolladores, porque un control giratorio es una animación pequeña e independiente con un trabajo obvio.

La aplicación móvil de Facebook ayudó a impulsar pantallas esqueléticas (EN) a la corriente principal. Cambió los espacios en blanco en la sección de noticias por contornos grises con la forma del contenido que se encuentra debajo.

Los hilanderos siguen siendo la opción predeterminada para la mayoría de los sitios. Un vistazo rápido a cualquier colección de CSS hilanderos (EN) muestra cuánta variedad surge del mismo puñado de formas giratorias. Los doce cargadores de esta página cubren las familias de hilanderos, puntos, barras, pulsos y anillos. Las pantallas esqueleto tienen un patrón diferente, vinculado a tu diseño, por lo que ningún generador puede producirlas de forma genérica.

CSS-Only, SVG y renderizado híbrido: cómo los generadores de cargadores CSS crean animaciones

Detrás de esa vista previa en vivo hay tres rutas de renderizado diferentes, y la mayoría de los generadores nunca te dicen cuál estás obteniendo. Este es solo CSS.

El método exclusivo CSS dibuja una forma con radio de borde o sombra de cuadro y la mueve usando transformación y opacidad. Está construido sobre la misma mecánica @keyframes (EN) que impulsa todas las demás CSS animaciones.

El método basado en SVG primero dibuja la forma como una ruta vectorial, luego aplica el movimiento a través de desplazamientos de stroke-dasharray o transformaciones simples CSS. Eso es lo que la gente quiere decir cuando habla de animar una forma SVG (EN) en lugar de un div.

El renderizado híbrido aparece cuando un generador quiere una forma compleja (un logotipo, un icono) pero aún quiere que el movimiento se controle mediante variables CSS simples. Eso evita la propia sintaxis de animación de SVG.

Compatibilidad del navegador con CSS animaciones del cargador

La compatibilidad con navegadores dejó de ser un verdadero obstáculo para este tipo de animaciones hace años.

Las animaciones CSS se envían sin prefijos en Internet Explorer desde la versión 10, Firefox desde la versión 16, Safari desde la versión 9 y Chrome desde la versión 43, según caniuse.com (EN). Las versiones anteriores necesitaban un prefijo de proveedor.

Los generadores creados hoy en día rara vez generan código con el prefijo del proveedor. Que la audiencia siga ejecutando un navegador que lo necesita ahora es un error de redondeo y esta herramienta también omite los prefijos.

¿Qué controles de personalización ofrecen los generadores de cargadores CSS?

Cada generador expone un puñado de los mismos diales centrales, incluso cuando la interfaz se ve completamente diferente de una herramienta a otra. Éste tiene tamaño, color y velocidad.

Tamaño: un píxel o un valor rem, a veces bloqueado en un rango mínimo y máximo.

Color: generalmente un selector hexadecimal, ocasionalmente con entradas RGB o HSL una al lado de la otra.

Ancho de trazo: controla el grosor del anillo o la barra, lo que es más relevante para los estilos basados en SVG.

Velocidad: se asigna directamente a la duración de la animación, generalmente entre 0,6 segundos y 2 segundos.

Recuento de elementos: cuántos puntos, barras o segmentos componen el cargador.

Los controles de tamaño se ejecutan cada vez más en clamp(), lo que permite que el cargador escale entre un piso y un techo en lugar de forzar un valor separado para el móvil. Una calculadora de valor de clamp elimina las conjeturas al elegir esos dos puntos finales. El generador anterior genera valores de píxeles fijos, así que cámbielos por una clamp() si lo necesita.

Los campos de color suelen esperar un código hexadecimal. Cambiar entre formatos significa convertir ese valor hexadecimal a RGB cada vez que un sistema de diseño entrega fichas de color en el otro formato.

La mayoría de los generadores limitan el tamaño entre 16 px y 200 px y rechazan cualquier cosa fuera de esa banda, principalmente para evitar que la vista previa rompa el diseño de la página. Aquí el rango es de 20px a 100px.

¿Qué formatos de salida proporcionan los generadores de cargadores CSS?

Tres formatos de salida cubren casi todos los generadores del mercado: sin formato CSS, SCSS y un fragmento combinado CSS-más-HTML. Esta herramienta produce CSS sin procesar, con el marcado documentado anteriormente.

Tanto Bootstrap como Tailwind envían su propia fuente como Sass o un paso de compilación en lugar de una única hoja de estilo plana. Esa es exactamente la razón por la que los equipos que ya están dentro de uno de esos sistemas tienden a optar por la exportación SCSS en lugar del CSS sin formato.

Cualquiera que sea el formato que salga, el código de producción generalmente pasa por un minificador CSS (EN) antes de enviarse, eliminando los espacios en blanco y los comentarios que deja el generador.

Yendo en la otra dirección, pegar el código exportado en un CSS embellecedor (EN) hace que sea más fácil de leer cuando decides qué conservar y qué recortar.

Los nombres de clases generados tienden a ser cortos y genéricos (spinner, loader-ring), por lo que la mayoría de la gente les cambia el nombre antes de que el código llegue a un proyecto real. Es poco probable que el prefijo custom_loader_ utilizado aquí colisione, pero cámbiele el nombre si tu código base tiene una convención de nomenclatura.

¿Qué herramientas generadoras de cargadores CSS vale la pena usar?

Un puñado de nombres aparecen una y otra vez una vez que comienzas a comparar opciones: Loading.io (EN), SpinKit (EN), Load Awesome (EN) y los controles giratorios integrados en el interior. Bootstrap (EN) y Tailwind (EN).

Herramientas generadoras dedicadas:

• Ventajas: control detallado, vista previa en vivo, sin dependencia del marco
• Desventajas: otra dependencia externa a seguir, los estilos pueden entrar en conflicto con las convenciones de nomenclatura existentes

Framework integrado:

• Ventajas: cero configuración adicional si el marco ya está en el proyecto, de forma coherente con el resto de la interfaz de usuario
• Contras: menos estilos de animación para elegir, la personalización está limitada por las propias variables del marco

El propio archivo README de SpinKit (EN) afirma que utiliza animaciones de opacidad y transformación aceleradas por hardware, distribuidas como un paquete npm simple sin necesidad de pasos de compilación.

Ese detalle importa más de lo que parece. La utilidad giratoria (EN) incorporada de Tailwind sigue la misma restricción, ciñéndose a las propiedades que los navegadores ya saben cómo animar de manera eficiente.

¿Cómo afectan los cargadores CSS al rendimiento de la página?

Todo el trabajo de un cargador es suavizar la espera, por lo que uno que tartamudea o cambia la página frustra su propio propósito.

Los navegadores modernos sólo pueden animar dos propiedades CSS de forma económica: transformación y opacidad. Cualquier otra cosa, como animar el ancho o la parte superior, obliga al navegador a volver a realizar el diseño y la pintura en cada cuadro.

• 60 FPS es la velocidad de fotogramas objetivo de los navegadores para que la animación se vea fluida, según web.dev (EN)
• Cada cuadro recibe un presupuesto de 16.7 milisegundos antes de que los usuarios comiencen a percibir el retraso.
• transformación y opacidad son las propiedades que el compositor puede animar (EN) sin activar el diseño o la pintura
• El 81% de las páginas móviles lograron una buena puntuación de cambio de diseño acumulativo en 2025, según el HTTP Archive Web Almanac (EN)

Los cargadores que reservan su propio espacio fijo (un ancho y alto establecidos en el elemento contenedor) no contribuyen en absoluto a ese número de cambio de diseño. Los que se construyen sin un marcador de posición suelen ser los que sí lo tienen. Cada cargador aquí establece un ancho y alto explícitos.

Las pantallas esqueléticas conllevan un pequeño coste adicional que la mayoría de los hilanderos no tienen. Repetir animaciones de degradado o brillo en una cuadrícula completa de tarjetas significa que se animan más elementos a la vez. Eso se suma en los teléfonos de gama baja incluso cuando cada animación individual es barata.

¿Los cargadores CSS cumplen con los estándares de accesibilidad?

La mayoría de los cargadores generados fallan en la accesibilidad de forma predeterminada, no porque la animación en sí sea el problema.

La pieza que falta casi siempre es una marca. Un div giratorio sin función ni etiqueta no le dice nada al lector de pantalla sobre lo que sucede en la página.

Los atributos ARIA (EN) que importan aquí están documentados en detalle. MDN enumera la propiedad de reflexión ariaBusy (EN) como Línea base ampliamente disponible, y el status role (EN) es el contenedor adecuado para un cargador.

El movimiento en sí es una preocupación separada del marcado. Las Pautas de accesibilidad al contenido web del W3C incluyen el Criterio de éxito 2.3.3, Animación a partir de interacciones (EN). Es una regla de nivel AAA que requiere que el movimiento provocado por la interacción del usuario pueda desactivarse a menos que sea esencial para el contenido.

Esa regla existe porque el movimiento tiene un costo físico real para una porción significativa de usuarios. Una investigación que utiliza datos de la Encuesta Nacional de Examen de Salud y Nutrición (EN), publicada en Archives of Internal Medicine, sitúa la disfunción vestibular en el 35.4% de los adultos estadounidenses de 40 años o más.

Respetar la consulta de medios prefers-reduced-motion es la solución práctica. Cambia una animación que gira o rebota por un simple desvanecimiento de opacidad, o ralentícela cuando se establezca esa preferencia. No retire el cargador por completo.

X (anteriormente Twitter) ya expone una opción de reducción de movimiento en su propia configuración de accesibilidad, separada de lo que esté configurado el sistema operativo. Ése es el mismo principio que se aplica a nivel de producto.

Los cargadores basados en SVG necesitan una cosa más, pero los CSS no. Sin un atributo oculto de aria o una alternativa de texto, un SVG decorativo puede terminar leído en voz alta como una cadena sin sentido de datos de ruta. La guía de archivos SVG accesibles (EN) cubre la solución.

¿Cómo se implementa un cargador CSS generado en un sitio web?

Obtener un cargador generado desde el panel de exportación a una página activa sigue el mismo orden independientemente de qué herramienta produjo el código.

1. Copia el bloque CSS en tu hoja de estilo o en una etiqueta de estilo con alcance
2. Pega el marcado HTML correspondiente donde debería aparecer el cargador
3. Agregue el contenedor de accesibilidad (role, aria-live, aria-busy) a su alrededor
4. Ocultar el cargador de forma predeterminada con display:none o visibilidad:hidden
5. Actívelo justo antes de que comience una solicitud y desactívelo una vez que llegue una respuesta.

Ese paso de alternancia generalmente está vinculado a una llamada de recuperación o una solicitud Ajax (EN). Un cargador que no tiene nada que esperar no tiene razón de existir.

Integración de un cargador CSS en proyectos React o Vue

Solo react-loader-spinner (EN) registró alrededor de 289,000 descargas semanales en el registro npm en septiembre de 2026. Eso dice mucho sobre la frecuencia con la que los equipos buscan un componente empaquetado en lugar de copiar el marcado sin formato a mano.

React aproximación:

• Envuelva el marcado del cargador en un componente pequeño que acepte un booleano de carga como accesorio.
• Renderícelo condicionalmente con el mismo booleano o use un componente de biblioteca como CircularProgress (EN) de MUI.
• Impulsar la visibilidad desde el estado establecido dentro de un useEffect alrededor de la llamada de recuperación

Vue enfoque:

• Vincular la visibilidad del contenedor con v-if o v-show contra una referencia reactiva
• Cambia esa referencia a verdadera antes de una llamada asíncrona y falsa en el bloque finalmente

Ninguno de los marcos necesita JavaScript (EN) para ejecutar la animación en sí, solo para decidir cuándo aparece el cargador en la pantalla.

¿Cuándo no funciona un generador de cargador CSS?

Una ruleta generada es la herramienta equivocada en el momento en que la espera deja de ser corta y predecible.

La investigación de usabilidad de Jakob Nielsen (EN) establece claramente el umbral. Una vez que el tiempo de respuesta supera los 10 segundos, muestra un indicador de porcentaje hecho en lugar de una rueda indeterminada, porque una rueda confirma la actividad pero no dice nada sobre cuánto queda.

Cada animación que produce un generador de cargador CSS es indeterminada por diseño, incluida la barra de progreso anterior. Ninguno de ellos calcula un porcentaje real, porque el generador no tiene idea de cuánto tiempo tardará tu solicitud real.

• Cargas largas, exportaciones o trabajos de varios pasos, donde el usuario necesita saber cuánto queda
• Respuestas muy cortas de aproximadamente 300 milisegundos, donde cualquier cargador simplemente agrega un destello de movimiento que el usuario apenas registra
• Dispositivos de gama baja que ejecutan varios cargadores animados a la vez, donde cada uno compite por los mismos recursos del compositor.
• Bibliotecas de componentes o sistemas de diseño que ya incluyen su propio estado de carga. La inclusión de CSS generado crea dos fuentes de verdad contradictorias

El costo de usabilidad de ese desajuste es silencioso pero real. Una rueda giratoria situada en la pantalla más allá del punto donde un usuario esperaba una respuesta indica que la página está atascada, no como un progreso.

Los generadores tampoco incluyen una duración mínima de visualización, por lo que una solicitud que se resuelve casi instantáneamente hace que el cargador parpadee y desaparezca. Los equipos suelen suavizar eso con una transición de opacidad corta en lugar de un corte estricto.

Preguntas frecuentes: Generador de indicadores de carga CSS

¿Cuál es la diferencia entre un cargador CSS y un girador CSS?

Una ruleta CSS es un tipo de animación específico, una forma giratoria. Un cargador CSS es el término más amplio, que abarca hilanderos, puntos, barras, pulsos y pantallas esqueléticas.

Cada ruleta es un cargador. No todos los cargadores son hilanderos.

¿Debería utilizar un cargador CSS o una animación Lottie?

Lottie (EN) renderiza JSON animaciones vectoriales basadas en exportadas desde After Effects, creadas para movimientos ilustrados complejos.

Un cargador CSS sigue siendo más liviano y simple, más adecuado para hilanderos simples y barras de progreso. Busque a Lottie cuando la animación necesite ilustración, no solo movimiento.

¿Es gratuito el uso de un generador de cargador CSS?

La mayoría de los generadores de cargadores CSS, incluido este, son gratuitos para la salida principal CSS. Los niveles pagos generalmente se aplican a extras como exportación de GIF o APNG, personalización de íconos o eliminación de atribuciones.

Las bibliotecas de código abierto como SpinKit y Load Awesome tienen una licencia MIT sin costo alguno.

¿Qué errores cometen los desarrolladores al utilizar cargadores CSS?

Copiar los nombres de clases de un generador directamente en un proyecto sin cambiarles el nombre provoca colisiones con los estilos existentes.

Saltarse el aria-live wrapper es común. También lo es cargar varias bibliotecas giratorias en una página, inflando el paquete CSS.

¿Qué debe comprobar primero al elegir un generador cargador CSS?

Un generador de cargador CSS gana su lugar en un proyecto una vez que la animación exportada usa solo transformación y opacidad, se envía bajo una licencia reutilizable y obtiene el contenedor de accesibilidad antes del lanzamiento.

Tres comprobaciones deciden si sobrevive a una base de código real:

• Método de renderizado: solo transformación y opacidad
• Licencia: términos MIT o CC0
• Contenedor de accesibilidad: rol, aria-live, aria-busy

Las exportaciones basadas en SVG generan formas complejas más suaves que las puras CSS. La desventaja es el peso adicional del archivo y el marcado a nivel de trazo que la mayoría de los proyectos nunca vuelven a tocar.

WCAG enumera el control de movimiento activado por interacción como Nivel AAA, su nivel más opcional, sin embargo, la disfunción vestibular contra la que protege afecta al 35.4% de los adultos estadounidenses mayores de 40.

Todo lo que vaya más allá de un control giratorio o una barra preestablecidos pertenece a un generador de animación de fotogramas clave creado para una sincronización personalizada de varios pasos.