CSS Loading Spinner Generator

Pick a spinner style, size, colours and speed and get a tiny loading indicator made only of HTML and CSS, with no images, fonts or JavaScript. The generated code includes a role="status" wrapper with screen-reader text and a prefers-reduced-motion rule, so the spinner slows down or stops for people who have asked their system to minimise motion.

CSS & Frontend Runs in your browser

Generate a CSS Loading Spinner

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Spinner style

Size

Line thickness

Colour

Track colour (ring)

Duration of one cycle

Class nameLetters, digits, hyphens and underscores; must not start with a digit.

Screen reader text

When the user prefers reduced motion

How to Use the CSS Spinner Generator

Choose a spinner style and set the size, line thickness, colours and cycle duration.
Set the class name and the text screen readers should announce.
Press Play preview to see it move (the preview never starts on its own).
Copy the HTML and CSS into your project.

About This Tool

Front-end developers who need a quick, accessible loading indicator for buttons, forms or page sections, and designers prototyping loading states.

Input: Spinner settings · Output: HTML + CSS.

Features and Limitations

Features

Five styles: ring, dual ring, three dots, bars and pulse.
Accessible markup with role="status" and visually hidden text.
Built-in prefers-reduced-motion fallback: slow down or stop.
Preview is paused by default and can be paused at any time; it also follows your own reduced-motion setting.

Limitations

A spinner only tells people that something is happening; for waits longer than a few seconds, show progress or a message instead.
Very fast cycles (under about 0.4 s) can be distracting; nothing here flashes, but keep motion calm.
Results are computed in your browser; nothing you enter is sent to a server.

Example

A 48 px ring with a 5 px line and a 0.9 s cycle needs about 15 lines of CSS and one empty div with screen-reader text.

Frequently Asked Questions

Why does the spinner need role="status"?

role="status" makes it a polite live region, so screen readers announce “Loading…” when it appears, without interrupting the user.

What does the reduced-motion rule do?

Operating systems let people ask for less motion (for example because of vestibular disorders). The @media (prefers-reduced-motion: reduce) rule slows the spinner down or replaces it with a static indicator for them.

Do I need to remove the spinner when loading finishes?

Yes. Remove or hide the element and, if useful, announce the result (for example “Results loaded”) so screen reader users know the wait is over.

Can I put the spinner inside a button?

Yes. Use a small size such as 16 px, keep the button's text, and set aria-busy="true" or disable the button while the request runs.