● GeneratorNest

Loading Spinner Generator

Pick a loading spinner, match it to your brand colour and copy the HTML and CSS – ready for any website or app.

<!-- HTML -->
<div class="loader"></div>

/* CSS */
.loader {
  width: 48px;
  height: 48px;
  border: 6px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

Free text tools · No sign-up needed

More free tools

Prompts & ideas

Utilities

Names

Writing

Social media

Fun

More tools

How it works

  1. Step 1

    Pick a spinner

    Choose one of 12 pure-CSS loaders: rings, dots, bars, pulse, ripple, progress bar and more.

  2. Step 2

    Customise it

    Set the colour, size in pixels and animation duration; every preview updates live.

  3. Step 3

    Copy the code

    Copy the HTML and CSS together or separately and paste them into your project.

CSS loading spinners without a library

A loading spinner tells people that something is happening – a page loading, a form sending, a file uploading. This generator gives you a gallery of loading spinners built only with HTML and CSS: no JavaScript, no GIFs, no SVG files and no icon library. Each loader is one small element (or a few spans) and a short CSS block with a keyframe animation, so it is light, sharp at any size and easy to restyle. Change the colour, size and speed, watch the preview, then copy the code into plain HTML, React, Vue, WordPress or any other framework.

How to use the code

Paste the CSS into your stylesheet (or a <style> tag) and the HTML where the loader should appear. The class is called .loader – rename it if that clashes with something in your project, and rename the keyframes too if you use several loaders on one page. To centre a loader, put it inside a container with display: flex; align-items: center; justify-content: center. Show it while you wait for data and hide it (for example with the hidden attribute or by removing the element) when loading is done.

Accessibility tips

Screen readers cannot see an animation, so add role="status" and a visually hidden text such as 'Loading…' to the loader's container, or set aria-busy="true" on the area that is loading. Respect people who prefer less motion: wrap the animation in @media (prefers-reduced-motion: no-preference) or slow it right down for prefers-reduced-motion: reduce. Make sure the colour has enough contrast against the background.

Spinner, skeleton or progress bar?

Use a spinner for short, unknown waits of a second or two. For content that takes longer to appear, a skeleton screen (grey placeholder shapes) feels faster because the layout is already visible. When you know how far along a task is, such as an upload, show a real progress bar with a percentage instead. The indeterminate progress bar in this gallery suits slim areas like the top of a page.

Frequently asked questions

Are these loading spinners free to use?

Yes. Copy and use the generated code in personal and commercial projects.

Do the spinners need JavaScript?

No. They are pure HTML and CSS animations. You only need JavaScript to show or hide them in your app.

Do they work in all browsers?

They use standard CSS animations that work in all current browsers. The gradient arc uses CSS masks, which are supported in current Chrome, Edge, Firefox and Safari.

How do I change the colour later?

Edit the hex colour values in the CSS, or generate the code again here with a new colour. Semi-transparent tracks use the same colour with a two-digit alpha suffix such as 33.

Can I use them in React or Vue?

Yes. Put the CSS in your stylesheet or CSS module and the markup in your component; in React, write className instead of class.

Guides

Try it free

100% free – no sign-up needed.

Open the tool