elefcode

CSS Loader Generator

Pure-CSS spinners, dots, bars and progress bars — pick a style, set colour, size and speed, and copy HTML and CSS with no images or JavaScript.

Style
Code
Preview
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #e5e7eb;
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

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

/* Slow the animation down for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .loader, .loader *, .loader::before { animation-duration: 3.0s; }
}

Advertisement

Guide

About the CSS Loader Generator

A loading indicator tells people the page is working. A pure-CSS loader needs no image or script: a few lines of CSS animate a single element, so it shows immediately, scales sharply on any screen and adds almost nothing to page weight.

Pick a style, tune it to your brand, and copy the markup and styles. Animations use transform and opacity, which browsers can run smoothly on the GPU.

Make loaders accessible

A spinning shape means nothing to a screen reader. The generated markup adds role="status" and an aria-label so assistive technology announces that content is loading. Remove the loader from the page once loading finishes, so it is not announced forever.

Reduced motion

Some people get dizzy or distracted by constant motion and turn on “reduce motion” in their operating system. The optional media query slows the loader down for them instead of stopping it, so it still shows that something is happening.

How to use it

  1. 1Pick a loader style.
  2. 2Set the colour, size, thickness and speed.
  3. 3Check it on light and dark backgrounds.
  4. 4Copy the HTML and CSS, or the React component.

Frequently asked questions

How do I centre the loader on the page?

Wrap it in a container with display: grid; place-items: center; min-height: 100vh — or use flexbox with justify-content and align-items set to center.

Can I use it with Tailwind?

Yes. Add the CSS to your global stylesheet and use the class name in your markup. Tailwind’s own animate-spin works for the ring style too.

Should I show a spinner or a skeleton?

Skeleton screens suit content with a known layout, such as lists and cards. Spinners suit short, unknown waits like submitting a form.

Do CSS animations slow down the page?

Not these. They only animate transform and opacity, which do not trigger layout, so they stay smooth even while the page is busy.

How do I change the size later?

Edit the width and height in the CSS, or regenerate here. The dots and bars scale their parts from the size you pick.

Related tools

CSS Keyframes Generatorcubic-bezier EditorCSS Button GeneratorBox Shadow Generator