Gerador de Animação de Carregamento

Build CSS loaders, spinners and progress animations with a live preview and copy-ready code

100% gratuito. Funciona totalmente no seu navegador: seus arquivos e dados nunca saem do seu dispositivo e nada é enviado para nenhum servidor.

visibility Live preview

Pure CSS (plus a tiny timer for percent / progress). No animation libraries.

code Export

.ugld{--s:64px;--c:#22d3ee;--bg:#0b1020;--sp:0.9s;--t:4px;--n:5;--r:28px;--p:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--c);font-family:system-ui,sans-serif}
.ugld-text{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
@media (prefers-reduced-motion:reduce){.ugld *{animation-duration:1.6s!important}}
.ugld-spin{width:var(--s);height:var(--s);border:var(--t) solid color-mix(in srgb,var(--c) 22%,transparent);border-top-color:var(--c);border-radius:50%;animation:ugld-spin var(--sp) linear infinite}
@keyframes ugld-spin{to{transform:rotate(360deg)}}

Jump to the next useful tool without leaving your flow.

See more

Sobre esta ferramenta

A loading animation tells someone the app is working instead of frozen. This generator builds CSS spinners, dots, bars, skeletons, orbits and neon rings, then lets you set colour, size and speed on a live preview. You can also drop the loader onto a fake webpage chrome so you can judge scale. Copy HTML and CSS, or download a ZIP. Percent and progress styles add a few lines of JavaScript only when you need a moving value.

Como usar esta ferramenta

  1. Pick a loaderSpinner, dots, wave, equalizer, skeleton, cube, neon and more.
  2. Tune colour and motionSize, colour, thickness, speed, optional caption such as Please wait.
  3. Preview and exportUse Preview on Website to see it over a mock layout, then copy HTML and CSS.

Por que usar

  • Twenty loader styles including skeleton, orbit and circular progress.
  • Optional caption so the wait has a sentence, not only a spinner.
  • Website preview so you can judge size against a fake page.
  • CSS-first output. No animation library to install.

Usos comuns

  • A page-level overlay while data loads.
  • A button spinner for a slow submit.
  • A skeleton block for a card that has not arrived yet.

Erros a evitar

  • Showing a spinner for work that finishes in under about 300ms. The flash reads as a glitch - render the result directly.
  • Using a spinner where a skeleton belongs. If you know the shape of what is loading, a skeleton feels roughly twice as fast.
  • Animating a percentage bar that is not tied to real progress. A bar that stalls at 90 percent is worse than no bar.
  • Leaving no accessible label. A bare spinner tells a screen reader nothing - keep the role="status" and its label.
  • Running a heavy blur or filter loader full screen on mobile, which can cost more frames than the work being waited on.

Perguntas frequentes

They are CSS (and a little JavaScript for percent or progress). That keeps them sharp on any screen and easy to recolour.

Yes. Turn on the caption and type Loading, Please wait, Processing, or anything else.

No. It is a mock browser frame on this page so you can see scale. Nothing is sent to a server.

Yes. The copied snippet is yours to use in client and commercial projects.

As pessoas também pesquisam

  • css loading spinner generator
  • loading animation css copy paste
  • skeleton loader css
  • css preloader generator free
  • progress bar css animation
  • pure css loader no javascript
  • loading dots animation css

Related guides