LocalToolsOffline browser tools collection

Category: Developer tools

CSS Loading Spinner Generator

System ideaMissing a tool?

Design lightweight CSS loaders locally and copy the code

Create CSS-only loading spinners with a live preview. Adjust size, colour, stroke and speed, then copy the HTML and CSS snippets. No JavaScript and no image assets.

Preview

HTML
<span class="loader" role="status" aria-label="Loading…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Every snippet animates only transform and opacity, and ends with a prefers-reduced-motion block so the animation stops for visitors who have asked their system to reduce motion.

No JavaScript, no images, no web fonts — and nothing leaves your browser.

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

A loading indicator is one of the few places where a few lines of CSS beat a library outright: no script to load, no image to request, nothing to initialise before the thing you are waiting for. These five templates — ring, dual ring, dots, bars and pulse — animate only `transform` and `opacity`, so the browser can run them on the compositor instead of recalculating layout on every frame. Each snippet ends with a `prefers-reduced-motion` block, because a spinner is decoration and someone who has asked their system to stop moving things should not have to sit and watch one. The markup is a `<span role="status">` with a label, so a screen reader announces the wait instead of finding an empty box.

How to use it

  1. Pick a template, then set size, stroke, speed and colours.
  2. Rename the class if it would clash with your stylesheet.
  3. Copy the HTML and the CSS into your project.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Are the spinners CSS-only?
Yes. Each one is a span (with a few empty child spans for the dots and bars templates) plus a CSS animation. There is no JavaScript, no SVG, no image and no web font.
Do I need JavaScript to run them?
No. The animation starts as soon as the element is in the document. You only need code to decide when to show and hide it.
Can I change speed and colour?
Yes — size, stroke thickness, animation duration, the main colour and the track colour are all controls here, and they are written straight into the snippet you copy.
What about visitors who prefer reduced motion?
Every generated snippet ends with a prefers-reduced-motion media query that effectively stops the animation, so the loader still appears but does not spin for people who have turned motion down at the system level.
Is the code generated locally?
Yes. The settings, the preview and the generated snippets all stay in your browser; nothing is uploaded.

Back to all tools