CSS Loader and Spinner Generator

How it works

Type the loader color into the left pane; HEX such as #2F6FED, rgb(47, 111, 237) and hsl(220, 84%, 56%) are all recognised, and the color you chose is shown as a swatch under the output. Pick one of four patterns under Animation type and enter the size in pixels; a 48-pixel spinning ring gets a 6-pixel border and turns once every 0.8 seconds. The first lines of the code hold the single div to place in your page: role="status" and aria-label make screen readers announce it as "Loading". Paste the CSS below it into your stylesheet; the class and the @keyframes rule refer to each other, so copy them together. The code ends with an @media block that slows the animation to a third of its speed for users who have turned on reduce motion. The tool writes the code but does not play it; to watch the animation, open the code in your own page or in an online code playground.

This tool is also known as css loader generator, css spinner generator, loading animation css, css loading spinner, three dots loading css.

What is @keyframes?

@keyframes is the CSS rule that defines the stages of an animation over time. Inside it you set points in percentages, or with from and to, and state how the element looks at each point: not rotated at 0%, turned 360 degrees at 100%. The browser fills in the frames in between. The animation starts when the element gets the animation property with the rule's name, a duration and a repeat count; in this tool the repeat is infinite.

What is prefers-reduced-motion?

prefers-reduced-motion is the CSS media query that tells a page whether the user has turned on the reduce-motion setting of their operating system. Turning off animations in Windows, Reduce Motion on macOS and iOS and Remove animations on Android all set it to reduce. The page should then tone down or remove large and fast movement; the WCAG accessibility guidelines recommend it.

What is the difference between a CSS loader and a GIF loader?

A GIF loader is a fixed image file: it has to be downloaded, its color and size cannot change, it blurs when scaled up and its transparent edges look jagged on dark backgrounds. A CSS loader is a few lines of code: nothing extra is downloaded, color and size change with one number, it stays sharp on every screen density and it can respect the reduce-motion setting. The GIF's only advantage is that it works where CSS cannot, for example in the body of an email.

Why one div, and why the reduced-motion block?

A loading indicator is the part of a page that gets added and removed most often. A structure with five nested spans clutters the HTML and adds room for mistakes when JavaScript shows and hides it. All four patterns here work with a single div: the ring is drawn with a border, the three dots with box-shadow, the bars with three background stripes and the pulse with scaling. No image, font or library is loaded.

For some people constant spinning or bouncing causes dizziness or nausea. They switch on reduce motion in their operating system, and the browser passes that on to the page as prefers-reduced-motion. The block at the end of the code does not stop the animation; it slows it down three times, so users still see that something is loading, without the fast movement.

Which pattern fits where?

The spinning ring is the most familiar indicator. It works inside a button, while a form is being sent or while a section loads, and it stays legible at small sizes such as 16-24 pixels. Three bouncing dots mean "the other person is typing" in chat and messaging interfaces; they sit close to a line of text and suit short waits.

Bars suggest continuous processes such as audio, music or data streaming. The pulse is calm and works for a location marker on a map or a live indicator, anywhere you want to say "something is happening here". If the wait will last more than a few seconds, no spinner is enough: use a progress bar or a skeleton screen.

Frequently asked questions

How do I make a loading animation with CSS?

Place one div on the page, give it a size and color in CSS, describe the movement with an @keyframes rule and attach it with the animation property on an infinite loop. This tool writes all of that for four ready-made patterns; choose the color and size and copy the result.

How do I hide the loader when loading is done?

Remove the div from the page or give it the hidden attribute when the work is finished. An animation that stays on the page while invisible keeps the processor busy for nothing; an element with display: none does not animate.

How do I change the animation speed?

The animation line in the code gives the duration in seconds (for example 0.8s). A smaller number makes it faster, a larger one slower. Change the duration in the reduced-motion block by the same ratio.

What does a screen reader announce for this loader?

Thanks to role="status" and aria-label="Loading" on the div, a screen reader treats it as a status message and reads the label. The animation itself is visual and is not announced; change the label to match your site's language.