Loading Animation Generator

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

100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.

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

About this tool

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.

How to use this tool

  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.

Choosing the right loading indicator

Use a spinner or dots for short waits of a second or two, and a skeleton screen - grey shapes where content will appear - for pages and lists that take longer, because it makes waiting feel shorter.

Show a loader only after about 300 milliseconds, so fast responses do not flash a spinner, and add an aria-label such as "Loading" for screen reader users.

Key features

  • 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.

Common uses

  • 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.

Mistakes to avoid

  • 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.

Frequently asked questions

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.