consolelog.tools

CSS Loading Spinner Generator

Pick from 10 pure-CSS loading spinners and tune size, color, speed, thickness, and count — with a live gallery and light/dark preview. Export a self-contained HTML+CSS snippet, CSS, SCSS, or a React component.

About this ToolHow it works, benefits & use cases

Loading indicators shouldn't require a JavaScript library or an SVG asset, and this generator proves it — every one of its ten spinners is plain HTML plus CSS keyframes. Browse the live thumbnail gallery (ring, dual ring, iOS lines, bouncing dots, fading dots, pulse, bars, ripple, orbit, and grid) and pick one, then tune it: size and animation speed apply to all, while thickness shows for ring and bars, a second color appears for dual-ring and ripple, and a count slider controls how many dots or bars render. A preview pane lets you check the spinner against dark, light, or card backgrounds so you can confirm contrast. Export a self-contained HTML + CSS snippet that just works on paste, or grab standalone CSS, SCSS, or a React component — all generated with namespaced class names so they won't collide with your styles.

How to Use

  1. 1Pick a spinner from the gallery of ten live thumbnails (ring, dots, bars, orbit, grid, and more).
  2. 2Adjust Size and Speed; for ring and bars set Thickness, and for dots and bars set Count.
  3. 3Set the Color, plus a second color for the dual-ring and ripple spinners.
  4. 4Switch the preview background between Dark, Light, and Card to check contrast.
  5. 5Choose an Output format — HTML + CSS, CSS, SCSS, or React (JSX) — then copy, download, or share it.

Key Benefits

  • Ten distinct pure-CSS spinners with no JavaScript, SVG, or dependencies
  • Per-spinner controls: thickness for ring/bars, second color for dual-ring/ripple, count for dots/bars
  • Live gallery plus dark / light / card preview backgrounds to check contrast
  • Self-contained HTML + CSS export that works the moment you paste it
  • Standalone CSS, SCSS, and ready-to-drop React component outputs
  • Namespaced class names so the keyframes never clash with your stylesheet
  • Adjustable speed in seconds and size from 16px up to 160px

Common Use Cases

  • Dropping a lightweight loading state into a page without adding a spinner library
  • Matching a spinner's color and size to an existing design system
  • Adding a busy indicator to a button or form during async submission
  • Generating a reusable React loading component for a component library
  • Prototyping skeleton and pending states quickly during development
Background

Spinner (10)

Customize

Copy, download, share, or pipe to another tool

<style>
.loader {
  width: 56px;
  height: 56px;
  border: 6px solid #6366f133;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: loader-rotate 1s linear infinite;
}

@keyframes loader-rotate {
  to { transform: rotate(360deg); }
}
</style>

<div class="loader"></div>

Pure CSS, zero dependencies

Every spinner is plain HTML + CSS keyframes — no JavaScript, no SVG, no library. Copy the HTML + CSS snippet and it just works, or grab the React component. Tune the size, color, and speed; ring and bars take a thickness, dots and bars take a count, dual-ring and ripple take a second color.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools