¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de animación de carga de CSS

ColorDesarrollador

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

Animation Type

Tipo

Apariencia

Size (px)

Overall size of the loader in pixels.

Stroke Width (px)

Used by ring-based loaders (Rotating Ring, Dual Ring, Pulse Circle).

Primary Color

Track / Secondary Color

Track color for ring loaders; ignored by dot-only types.

Animación

Duration (sec)

Length of one full animation cycle, in seconds.

Producción

Formato

ARIA Label

Accessible label announced by screen readers.

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Generador de animación de carga de CSS

Generate eight popular loading animations in pure CSS — rotating ring, dual ring, pulse dots, bouncing dots, bouncing ball, equalizer bars, pulse circle, and typing indicator. Tweak color, size, stroke width, and duration; watch the live preview update instantly; copy the @keyframes + minimal HTML into your project. Zero JavaScript, zero SVG, zero external dependencies.

Cómo Usar

Choose an animation type from the dropdown.
Set the loader size in pixels and adjust the stroke width for ring-based types.
Pick a primary color and a track / secondary color.
Set the duration (in seconds) for one full cycle.
Select an output format — HTML + CSS combined, CSS only, or HTML only.
Optionally set a custom ARIA label for screen readers.
Copy the generated snippet or download it as a file.

Características

Eight animation styles — covers the most common loading patterns in modern UIs.
Previsualización en tiempo real — every change re-renders instantly so you can verify timing and smoothness before copying.
Pure CSS output — no JavaScript runtime cost and no SVG markup to maintain.
Scoped class names — each generated snippet uses a unique prefix so multiple loaders can coexist without colliding.
Accessible by default — every loader includes role=”status” and a configurable aria-label.
Three output modes — combined HTML + CSS, CSS only, or HTML only, depending on how you integrate it.

 Preguntas frecuentes

What does @keyframes do in CSS?

The @keyframes at-rule defines the intermediate steps of a CSS animation. Each step (0%, 50%, 100%, etc.) describes the styles an element should have at that moment of the animation cycle. The browser interpolates between the steps to produce smooth motion. Without @keyframes, the animation property has nothing to play.
Why use CSS animations instead of SVG or JavaScript for loaders?

CSS animations run on the browser's compositor thread, which means they continue smoothly even when the main JavaScript thread is busy. They have no script dependency, no extra payload, and they degrade gracefully on older devices. SVG and JavaScript loaders can do more complex things, but for a simple spinner or bouncing dots, CSS is the lightest and most reliable option.
What is a cubic-bezier timing function?

A cubic-bezier timing function describes how an animation accelerates and decelerates over time using four control points on a curve. Compared to keywords like linear or ease-in-out, cubic-bezier lets you fine-tune the feel of motion — for example, a bouncing ball uses cubic-bezier(0.5, 0.05, 0.5, 0.95) to mimic gravity.
Why do loading animations need a role and aria-label?

Screen readers cannot see a spinning circle, so they need a programmatic hint that something is happening. role="status" tells assistive technology that the element conveys a live status update, and aria-label provides the human-readable text that gets announced. Without these attributes, a loader is invisible to non-sighted users.