Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Animação de Carregamento CSS

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

Animation Type

Tipo

Aparência

Tamanho (px)

Overall size of the loader in pixels.

Largura do traço (px)

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

Cor primária

Pista / Cor secundária

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

Animação

Duration (sec)

Length of one full animation cycle, in seconds.

Saída

Formatar

Rótulo ARIA

Rótulo acessível anunciado pelos leitores de tela.

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de Animação de Carregamento 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.

Como 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.
Pré-visualização em tempo 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.
Nomes de classe escopados — 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.

 Perguntas frequentes

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.