¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de animación de carga de CSS

ColorDesarrollador

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

Tipo de animación

Tipo

Apariencia

Tamaño (px)

Tamaño general del cargador en píxeles.

Ancho del trazo (px)

Usado por los cargadores basados en anillo (Anillo giratorio, Anillo dual, Círculo de pulso).

Color primario

Color de la pista / secundario

Color de la pista para cargadores basados en anillo; ignorado por tipos que solo usan puntos.

Animación

Duración (seg)

Duración de un ciclo completo de animación, en segundos.

Producción

Formato

Etiqueta ARIA

Etiqueta accesible anunciada por lectores de pantalla.

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Generador de animaciones de carga en CSS

Generador de animación de carga de CSS

Genere ocho animaciones populares de carga en CSS puro — anillo giratorio, anillo dual, puntos de pulso, puntos que saltan, bola que salta, barras de igualador, círculo de pulso y indicador de escritura. Ajuste el color, el tamaño, el ancho del trazo y la duración; observe actualizaciones en tiempo real en la vista previa; copie el fragmento @keyframes más el HTML mínimo en su proyecto. Cero JavaScript, cero SVG, cero dependencias externas.

Cómo Usar

Elige un tipo de animación desde el menú desplegable.
Establece el tamaño del cargador en píxeles y ajusta el ancho del trazo para los tipos basados en anillo.
Elige un color primario y un color de pista / secundario.
Establece la duración (en segundos) para un ciclo completo.
Elige un formato de salida — combinado HTML + CSS, solo CSS o solo HTML.
Opcionalmente establece una etiqueta personalizada ARIA para lectores de pantalla.
Copia el fragmento generado o descárgalo como archivo.

Características

Ocho estilos de animación — cubre los patrones más comunes de carga en interfaces modernas.
Previsualización en tiempo real — cada cambio se vuelve a renderizar instantáneamente para que puedas verificar el tiempo y la suavidad antes de copiar.
Salida en CSS puro — sin costo de ejecución de JavaScript y sin markup de SVG para mantener.
Nombres de clases escalonadas — cada fragmento generado utiliza un prefijo único para que varios cargadores puedan coexistir sin colisiones.
Accesible por defecto — cada cargador incluye role="status" y una etiqueta aria-label configurable.
Tres modos de salida — combinado HTML + CSS, solo CSS o solo HTML, según la forma en que lo integres.

 Preguntas frecuentes

¿Qué hace @keyframes en CSS?

La directiva @keyframes define los pasos intermedios de una animación en CSS. Cada paso (0%, 50%, 100%, etc.) describe el estilo que debe tener un elemento en ese momento del ciclo de animación. El navegador interpola entre los pasos para producir movimiento suave. Sin @keyframes, la propiedad de animación no tiene nada que reproducir.
¿Por qué usar animaciones en CSS en lugar de SVG o JavaScript para cargadores?

Las animaciones en CSS se ejecutan en el hilo de composición del navegador, lo que significa que se mantienen suaves incluso cuando el hilo principal de JavaScript está ocupado. No tienen dependencia de script, no añaden carga adicional y se degradan de forma gráfica en dispositivos antiguos. Los cargadores en SVG o JavaScript pueden realizar cosas más complejas, pero para un simple giratorio o puntos que salen, CSS es la opción más ligera y más confiable.
¿Qué es una función de timing cubic-bezier?

Una función de timing cubic-bezier describe cómo una animación acelera y desacelera con el tiempo usando cuatro puntos de control en una curva. En comparación con palabras clave como linear o ease-in-out, cubic-bezier permite afinar el sentido del movimiento — por ejemplo, una bola que salta utiliza cubic-bezier(0.5, 0.05, 0.5, 0.95) para imitar la gravedad.
¿Por qué los cargadores de animación necesitan un rol y una etiqueta ARIA?

Los lectores de pantalla no pueden ver un círculo giratorio, por lo que necesitan una pista programática de que algo está ocurriendo. role="status" indica a las tecnologías de asistencia que el elemento transmite una actualización de estado en tiempo real, y aria-label proporciona el texto legible para humanos que se anuncia. Sin estos atributos, un cargador es invisible para usuarios sin visión.