# 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.

**URL:** https://convertto.tech/t/css-loader-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.
- [CSS Animation Generator](https://convertto.tech/t/css-animation-generator): Generate keyframe animations — fade, slide, bounce, pulse, spin and shake.
- [Cubic Bezier Easing Generator](https://convertto.tech/t/cubic-bezier-generator): Build custom CSS easing curves and see the motion they produce.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Transform Generator](https://convertto.tech/t/css-transform-generator): Build a 2D or 3D transform visually and copy the CSS, with the transform origin handled properly.