Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Ruta de la tarea / de la entrada al resultado

Elige el estilo del indicador

Funciona en local · No se sube nada

Cómo funciona Generador de animaciones de carga CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo diseñar un indicador de carga CSS

  1. 01

    Elige el estilo del indicador

    Abre Estilo del indicador y elige Anillo orbital para un clásico anillo giratorio o Tres puntos para un trío de puntos que rebotan. La vista previa en vivo se anima con cada cambio que haces, y cada estilo incluye sus propios @keyframes al exportar.

  2. 02

    Dimensiona el marco y el trazo

    Usa un marco de 24–160 px y un trazo o puntos de 2–20 px. El trazo del anillo debe ser menor que la mitad del marco. Los tres puntos y sus separaciones de al menos 2 px deben caber; si no, se desactivan la copia y descarga. Las dimensiones exportadas del anillo incluyen el borde.

  3. 03

    Ajusta velocidad y colores

    Elige una Duración del ciclo de 0,2 a 4 segundos en pasos de 0,05 s. Color activo define el borde superior del anillo o el punto central; Color de la pista define el resto del anillo o los dos puntos exteriores. Los ciclos lentos sugieren trabajo tranquilo en segundo plano; los rápidos transmiten urgencia.

  4. 04

    O parte del ejemplo

    Pulsa Cargar ejemplo para aplicar un atrevido ajuste de Tres puntos — marco de 72 px, puntos de 12 px y ciclo de 0,75 s en rojo y amarillo — como punto de partida. Restablecer siempre devuelve el anillo orbital predeterminado.

  5. 05

    Copia o descarga el CSS

    Pulsa Copiar CSS para dejar el conjunto de reglas en el portapapeles, o Descargar .css para guardar toolars-loader.css. El panel de salida muestra los bytes exactos que exportas, y ambos botones permanecen desactivados mientras algún valor no pase la validación.

  6. 06

    Conéctalo a tu marcado

    Anillo orbital necesita un solo elemento con la clase .loader; Tres puntos espera tres hijos span dentro de él. La exportación incluye un bloque de prefers-reduced-motion que detiene la animación para las personas sensibles al movimiento.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de animaciones de carga CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Cuándo es útil Generador de animaciones de carga CSS

Crear un anillo orbital naranja

En una prueba local del 24/09/2026, elige Anillo orbital, marco de 64 px, trazo de 8 px, ciclo de 1,2 s, color activo #ff6600 y color de pista #dfe3ea. La vista previa sigue siendo válida. El CSS de .loader fija 64px de ancho y alto, borde de 8px en #dfe3ea, borde superior naranja y toolars-spin 1.2s linear infinite.

Exportar la muestra de tres puntos

«Cargar muestra» aplica Tres puntos con marco de 72 px, puntos de 12 px y ciclo de 0,75 s: #f21a10 en el centro y #ffd11a en los extremos. El CSS usa un espacio de 18px y retrasos de -0.25s y -0.5s. En la prueba local, la copia y toolars-loader.css descargado coincidieron en sus 695 bytes UTF-8.

Corregir puntos que no caben

Con la muestra de tres puntos, reduce el marco a 24 px y conserva los puntos de 12 px. La vista previa indica CHECK VALUES y avisa que los puntos y espacios deben caber en el marco. Se borra el CSS y se desactivan Copiar CSS y Descargar .css. Vuelve a 72 px para recuperar el CSS de 695 bytes y ambas acciones.

Qué hace Generador de animaciones de carga CSS en realidad

Un panel que actualiza datos cada pocos segundos necesita un spinner en la paleta de la marca; un botón de pago quiere un estado de ocupado mientras se confirma la transacción; un prototipo merece algo mejor que el aspecto predeterminado del navegador. Resolver el marco, el trazo y la cadencia de forma visual significa que el indicador ya está bien antes de que una sola línea entre en la hoja de estilos — y como el generador funciona por completo en esta pestaña, los colores y nombres de un producto sin lanzar nunca salen de la máquina. Exportar es un clic cuando el movimiento se siente bien.

Preguntas frecuentes

¿Qué HTML espera el CSS generado?
Anillo orbital funciona con un solo elemento con la clase .loader. Tres puntos espera tres hijos span dentro de .loader; la hoja de estilos escalona sus retardos de animación automáticamente, así que el marcado queda trivial y no hacen falta clases extra.
¿Por qué la vista previa dice REVISA LOS VALORES?
Usa un marco de 24–160 px y un trazo o puntos de 2–20 px. El trazo del anillo debe ser menor que la mitad del marco. Los tres puntos y sus separaciones de al menos 2 px deben caber; si no, se desactivan la copia y descarga. Las dimensiones exportadas del anillo incluyen el borde.
¿Cómo se sincronizan los tres puntos?
La hoja de estilos se encarga de la coreografía: el span central toma el Color activo, y el segundo y el tercero reciben retardos de animación negativos de un tercio y dos tercios del ciclo, de modo que el rebote se escalona uniformemente a lo largo del bucle.
¿Respeta el indicador los ajustes de reduced-motion?
Sí. Cada exportación termina con una media query para prefers-reduced-motion que apaga la animación — la variante de puntos además se queda con una opacidad fija — así que quienes piden menos movimiento reciben un indicador estático y tranquilo en lugar de uno giratorio.
¿Puedo ajustar el indicador después de pegarlo en mi proyecto?
Por supuesto; la salida es CSS plano con valores legibles. Cambia los tamaños en píxeles, la duración o los colores directamente en tu hoja de estilos: los @keyframes también son declaraciones normales, así que cada parte del indicador sigue siendo editable tras la exportación.
¿Se suben mis ajustes a algún sitio?
No. El generador funciona por completo dentro de la pestaña actual del navegador, no necesita cuenta, y ningún valor entra en almacenamiento, registros, analítica o la red. Pulsa Restablecer para volver a los valores predeterminados; cerrar la pestaña lo descarta todo.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear

Generador de patrones de fondo CSS

CSS Background Pattern Generator

Crea fondos de puntos, cuadrícula o diagonal solo con degradados CSS, sin imágenes: ajusta mosaico, marca y colores, y copia la regla de tres líneas.

Crear