Handitab

CSS Loader Generator

Generate a pure CSS loading indicator (ring spinner, bouncing dots, bars, or pulse) with your size, color, and speed, and copy the code.

About CSS Loader Generator

A CSS loader is a loading indicator drawn with styles alone, with no image or script. This generator outputs HTML and CSS for four styles. The ring is a bordered circle with one colored side that rotates. Dots and bars are three child elements animated with staggered delays. The pulse is a circle that scales up while fading out. Add role="status" and a hidden text label so screen readers announce that content is loading.

How to use CSS Loader Generator

  1. Fill in "Style", "Size", "Color" and "Speed".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about CSS Loader Generator

How do I center the loader on the page?

Give the parent display: grid and place-items: center, with a height such as 100vh for a full-screen overlay. The loader is an inline-block or inline-flex element, so it centers like any other box.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Switch GeneratorGenerate CSS for a toggle switch built on a real checkbox input, with your own width, on and off colors, and animation speed.CSS Text Glitch Effect GeneratorGenerate a CSS glitch text effect with two offset color layers and an adjustable speed, previewed on your own text, then copy the code.CSS Text ShadowGenerate a CSS text-shadow by adjusting horizontal offset, vertical offset, blur, and color with a live preview on sample text.CSS Triangle GeneratorGenerate a pure CSS triangle pointing up, down, left, or right with the border technique, by setting its width, height, and color.Darken ColorDarken a color by a chosen percentage by lowering its HSL lightness, and get the darker shade as HEX, RGB, and HSL codes.EM to PXConvert em units to pixels by multiplying by the font size of the element (16px by default), with rem, pt, and vw results as well.