Loading Spinner CSS Generator

What you get

The generator writes two rules: a .loader class and a @keyframes spin block. The class draws a circle, gives it a light gray ring and colors the top edge of that ring. The keyframes turn the circle one full rotation, and the animation line repeats it forever. Nothing else is needed: no image file, no icon font and no script.

With the default values (60 px, 6 px ring, #10b981, 1 second) the output looks like this:

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Add it to your page

Paste the CSS into your stylesheet, then add one empty element where the loader should appear:

<div class="loader" role="status" aria-label="Loading"></div>

Show the element while the work is running and remove it, or hide it with display: none, when the content arrives. The role and aria-label attributes let screen readers announce the state.

Sizes that work

A rule of thumb is a thickness of about one tenth of the diameter. Much thinner looks faint on high-resolution screens, and much thicker turns the ring into a blob.

Things to know

• The track color is fixed at light gray (#eee). On a dark background, edit that value in the pasted CSS.
• The tool makes one circular spinner. Dots, bars and other shapes need different markup.
• If a class called loader or an animation called spin already exists in your project, rename them in the pasted CSS so the rules do not collide.

Showing and hiding it

A loading spinner should appear when work starts and disappear when it ends. A simple pattern is to keep a hidden attribute on the element and remove it when a request begins. If the wait is usually very short, add a small delay of a few hundred milliseconds before showing the ring, so quick responses do not flash a spinner for an instant. Whatever you choose, always hide the spinner in the error case too, or visitors will wait for something that already failed.