Spinner Animation Maker

Create customizable loading spinners, progress rings, and skeleton screen animations.

Tested tool guide Tested browser tools Checked August 16, 2026

What Spinner Animation Maker does and how it behaves

Loading UI is the only part of an interface people see when your app is at its worst, so it has to look calm and deliberate. This tool builds the three wait states: an indeterminate spinner for waits of unknown length, a progress ring that sweeps toward a percentage, and a skeleton screen whose placeholder blocks echo the layout of content still arriving. You choose size, colors, speed, and shape, and the tool produces the animation. The usual mistake is reaching for a spinner for every wait: a looping spinner says 'no ETA', so using one where a real percentage exists reads as a hang.

How the result is produced

Three wait-state modes

The tool separates waits of unknown length from waits with a known target. Spinner mode repeats a cycle with no end state, so it fits only when you cannot predict the wait. Ring mode sweeps an arc to a value you set, so it can show real or staged progress. Skeleton mode renders placeholder shapes - text lines, avatar circles, image blocks - arranged like the content they replace.

Timing and pacing

The duration you set defines one full cycle: a 1-second spinner completes one turn per second, and a 2-second ring takes two seconds to sweep its arc. Short cycles look frantic at small sizes while the same speed reads sluggish on a large mark, so judge pacing at the final size. Skeleton shimmer and pulse rates tend to sit slower than spinner cycles, since they represent page structure, not motion.

Good uses

Branding a default loader: a new site or prototype still shows the browser's built-in spinner, or nothing at all. Generate one in the brand color at the right size so the loading state looks designed rather than accidental.
Progress for a measurable wait: a file upload, report export, or video render has a known duration. Generate a ring that sweeps toward the real percentage instead of looping aimlessly while the task runs.
Skeleton screen for a data-heavy page: a dashboard or feed loads its content after first paint. Generate placeholder rows, avatars, and image blocks shaped like the final layout so the page never flashes blank.

Limits and checks

Preview context versus real context. The preview shows the animation on a clean, neutral background, so contrast and legibility change once the mark sits on your actual page: a light-colored spinner can disappear on a white card, and a thin ring can flicker at small sizes. Test at final size on the real background, including dark mode.
Duration is one full cycle, not a speed setting. A 1.2-second duration means one full turn every 1.2 seconds, and that same duration reads differently on a small mark than a large one. There is no universal 'good' speed; judge the result on the real element.
The ring is only as honest as its input. A progress ring implies a measurable wait, so a ring that loops forever or restarts at random is an indeterminate animation wearing determinate clothing. If the underlying task cannot report progress, a spinner or skeleton is the more truthful choice. Plan a reduced-motion fallback as well: users with vestibular disorders need a static alternative.

Common questions

Can the progress ring show real progress from my app, or is it just a visual?

It is a visual that sweeps an arc to the value you set; it becomes honest only if your code drives it with a live value from the upload, export, or render it represents. Animate it on a timer and it shows a guess. The tool generates the animation; the data that feeds it has to come from your application.

Why would I use a skeleton screen instead of a spinner?

A spinner says 'wait'; a skeleton says 'here is the shape of what is coming', which makes the wait feel shorter and sets expectations for the layout. Skeletons suit pages whose structure is stable, like dashboards, lists, and feeds. They misfire when the layout changes after data arrives, because the screen then visibly reshuffles on load.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.