CSS Tools

CSS Loader Generator

Generate pure CSS loading animations. Choose from spinner, dots, bars, pulse, or ring. Customize size, color, and speed then copy the HTML and CSS.

Loader type
HTML
<div class="loader"></div>
CSS
.loader {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #f5a623;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

How CSS loaders work

CSS loaders use @keyframes to define animation states andanimation to apply them. Common properties: transform for movement and rotation, opacity for fading, andanimation-delay to stagger multiple elements.

animation: name duration timing-function infinite;@keyframes name { from { } to { } }

Frequently asked questions

Do these loaders require JavaScript?

No. All loaders are pure CSS animations using @keyframes. They work without any JavaScript.

How do I change the animation speed?

The animation-duration property controls speed. Smaller values (0.5s) are faster; larger values (3s) are slower.

Can I use these in production?

Yes. The generated code is plain CSS with no dependencies or licenses. Copy and use freely.

How do I center a loader on a page?

Wrap it in a container with display: flex; align-items: center; justify-content: center; height: 100vh;

Related CSS tools