How to Create a CSS Loading Spinner Step by Step

July 6, 2026

To create a CSS loading spinner, pick a style (ring, dots or bars), set its size, color and animation speed, preview it live, then copy the CSS including the @keyframes rule. The ByteTools CSS Loader Generator builds all three types with no images and no animation library. This tutorial walks through making one from scratch and explains the code it produces.

A loading spinner tells users something is happening during a fetch, page transition or form submit. Drawing it in pure CSS keeps it tiny, sharp at any resolution, and free of network requests. A generator lets you dial in the look and hands you the exact keyframes.

What the CSS Loader Generator does

The tool offers three presets — a spinning ring, bouncing dots and animated bars — and controls for size, color and speed. As you adjust them, the loader animates live so you can judge the tempo and scale. The output includes the element styles and the @keyframes rule, so it drops straight into a project. Everything is generated locally in your browser: free, private and offline-capable as a PWA.

Step-by-step: build a ring spinner

Pick a style. Choose the ring for the classic circular spinner (or dots/bars for a different feel).
Set size, color and speed. Size it to sit inside a button or fill a loading panel, match the color to your theme, and set a speed that feels responsive without being frantic.
Watch the live preview. Confirm the animation reads clearly at your chosen size before copying.
Copy the CSS. Paste the element styles and the @keyframes block into your stylesheet.

Understanding the generated code

A ring spinner is a circular element with a mostly transparent border and one colored side, rotated forever. The copied code looks like this:

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Control	CSS it affects	Effect
Size	width / height	How large the spinner renders
Color	border-top-color	The visible spinning segment
Speed	animation-duration	Shorter duration spins faster

Placing the spinner in your UI

To center it, wrap it in a flex container with justify-content: center and align-items: center, or use absolute positioning with inset: 0 and margin: auto. Inside a button, place it beside or in place of the label while a request is pending. Because it is pure CSS, it works anywhere without scripts.

Why generate it in the browser

The tool runs client-side, so you prototype spinners privately and offline, with no dependency to install and no GIF to host. You copy standards-based CSS that stays crisp on any screen and respects your theme color out of the box.

Try the CSS Loader Generator — free and 100% in your browser.

FAQ

Do I need JavaScript to run a CSS spinner?

No. The animation is driven entirely by CSS @keyframes. You only need JavaScript to show or hide the spinner when loading starts and ends.

How do I make the spinner match my brand color?

Set the color control before copying, or edit the colored border/segment value in the generated CSS to your brand hex. The rest of the ring stays a faint neutral so the motion reads.

Where does the @keyframes rule go?

Paste it into your stylesheet alongside the spinner class. Keyframes can live anywhere in the CSS; the animation references them by name.

Can I resize the spinner without breaking it?

Yes. Change the width and height together to keep it circular. The border thickness and animation are independent of size, so it scales cleanly.

Related free tools

CSS Animation Generator — build custom keyframe animations.
CSS Transition Generator — smooth state changes and hovers.
CSS Button Generator — style the button your loader sits in.
CSS Transform Generator — experiment with rotate and scale.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS and custom software. If you need a fast, polished front end with the right micro-interactions, explore how ByteVancer can help.

Guide