CSS Loader Generator

Generate pure CSS loading spinners and animations. Customize color, size, and speed. Copy HTML + CSS with one click.

Style

48px
1s
4px
#3b82f6

HTML

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

CSS

.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #3b82f633;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

CSS Loader Generator

Generate pure CSS loading spinners and animations for your website. Choose from multiple loader styles, customize colors, size, and speed, then copy the HTML and CSS.

How to Use

  • Pick a loader style from the options.
  • Customize the color, size, speed, and border width.
  • Preview the animation in real time.
  • Copy the HTML and CSS separately.

Frequently Asked Questions

How do I use a CSS loader?+
Copy the HTML and CSS, paste the CSS into your stylesheet and the HTML where you want the loader to appear. Show it while content is loading and hide it when ready.
Are these loaders pure CSS?+
Yes. All loaders use only HTML and CSS with keyframe animations. No JavaScript or images required. They work in all modern browsers.
Can I customize the colors and size?+
Yes. Use the controls to adjust the color, size, speed, and border width. The CSS updates in real time. You can also edit the CSS directly after copying.

Related Tools

Glassmorphism GeneratorBox Shadow GeneratorCSS Gradient Generator

CSS Loader Generator — free online css loader generator, css spinner, loading animation css, css loading spinner, css loader, pure css loader, loading spinner generator, css animation loader, css spinner generator, loading animation generator. No signup required. Works in your browser.