Keyframes Spinner Generator

The Keyframes Spinner Generator builds a classic rotating ring loader using nothing but CSS — a single element, a border trick and an @keyframes rotation.

It is the kind of spinner you reach for constantly while waiting on a fetch, a form submit or a page transition, and this tool lets you dial one in visually instead of hand-tuning numbers in your stylesheet.

Every control updates the preview instantly.

Set the diameter and border thickness in pixels, pick the arc color and the static track color with native color inputs, and choose how many seconds one full rotation should take.

You can also rename the CSS class so the generated selector and keyframes block drop straight into your existing naming scheme.

The tool validates your input as you go: it will not let the border swallow the whole circle or accept a non-numeric speed, and it shows a clear message when something is out of range.

When the spinner looks right, copy the generated code — a self-contained class plus its keyframes and a small, accessible HTML snippet with role="status" — and paste it into your project.

There are no dependencies, no JavaScript and no build step, and because everything runs in your browser nothing you type is uploaded.