Skip to content
Convertto

CSS Loading Spinner Generator — No Images, No JavaScript

Build a spinner, dots, bars or a pulse from pure CSS and copy the keyframes.

A CSS loader is one element and one keyframe rule — no image to download, no JavaScript to run, and it keeps animating while the main thread is busy, which is exactly when a loader is on screen. A ring spinner is a circle with one coloured border side rotating; a pulse scales opacity and size; a sweeping bar animates a background position. Each one is a single element with no pseudo-elements, and each comes with a prefers-reduced-motion fallback so it stops for people who have asked their system for less movement.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why does a CSS spinner keep moving when the page is busy?

Transforms and opacity are animated on the compositor thread, so they carry on even while JavaScript is blocking the main thread. That is precisely when a loader matters, and it is why a JavaScript-driven spinner freezes at the worst moment.

Do I need the reduced-motion block?

Yes, if you can. A spinning element is a common migraine and vertigo trigger. The generated fallback stops the animation and dims the element so it still reads as "waiting" without moving.

Should I animate width and height instead of transform?

No. Width and height changes force layout on every frame; transform and opacity do not. The visual result is the same and the cost is not close.

How to use the css loader generator

  1. 1Choose the style.
  2. 2Set the size.
  3. 3Set the thickness.
  4. 4Pick the colour.
  5. 5Set the cycle.
  6. 6The result appears immediately — copy or download it.

Embed this tool

Put the working css loader generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Hover Effect GeneratorGenerate a hover effect that animates cleanly, with the reduced-motion guard included.CSS Animation GeneratorGenerate keyframe animations — fade, slide, bounce, pulse, spin and shake.Cubic Bezier Easing GeneratorBuild custom CSS easing curves and see the motion they produce.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.

Last updated

More css generators