Question 1

How do you make a loading spinner with only CSS?

Accepted Answer

Create a small element, give it a size and a border (or a few child dots), then animate a transform such as rotate or scale with a CSS @keyframes rule set to animation-iteration-count: infinite. No JavaScript or image is needed — the browser repaints the animation natively. This generator writes that full CSS, including the @keyframes block, for ring, dual-ring, dots, bars and pulse styles.

Question 2

What is a CSS @keyframes rule?

Accepted Answer

@keyframes defines the intermediate steps of a CSS animation by listing percentages (0% to 100%) or the keywords from and to, each with the property values at that moment. An element references the rule by name through the animation or animation-name property. A spinner, for example, uses @keyframes spin { to { transform: rotate(360deg); } } and plays it forever.

Question 3

How do I change how fast the spinner rotates?

Accepted Answer

The speed is the animation-duration: a smaller value means one full cycle finishes sooner, so the loader looks faster. Around 0.8 to 1.2 seconds reads as a normal spinner; under 0.5 seconds feels frantic. This tool exposes a speed slider in seconds and writes the value straight into the animation shorthand.

Question 4

Why is a CSS loader lighter than an animated GIF?

Accepted Answer

A CSS spinner is just a few lines of text in your stylesheet, so it adds almost no bytes and needs no extra network request. It also stays razor sharp at any size and any resolution because it is vector-based, while a GIF is a fixed-resolution raster file that must be downloaded, can look blurry when scaled and often has limited colors.

Question 5

How do I make a CSS loader accessible?

Accepted Answer

Respect the prefers-reduced-motion media query so the animation slows or stops for users who request reduced motion, and expose the loading state to assistive technology with role="status" and an aria-label or visually hidden text such as Loading. Avoid very fast flashing, which can be uncomfortable or unsafe for some users.

CSS LoaderGenerator

CSS Loader
Generator