Do the loaders use images or JavaScript?

No — each loader is pure HTML and CSS with a keyframe animation, so it's lightweight and works without any script.

Do they respect reduced motion?

The preview honours your reduced-motion setting. For production, wrap the animation in a prefers-reduced-motion media query if needed.

Is anything uploaded?

No. The code is generated in your browser and never leaves your device.

Loader Generator

Generate pure-CSS loaders — spinners, dual rings, bouncing dots, bars and pulses — with adjustable size, colour and speed. Copy the HTML + CSS instantly.

Size48pxSpeed10×.1sColour

HTML + CSS

<div class="loader"></div>
<style>
.loader{width:48px;height:48px;border-radius:50%;border:5px solid #6366f133;border-top-color:#6366f1;animation:loader-spin 1s linear infinite;}
@keyframes loader-spin{to{transform:rotate(360deg);}}
</style>

About this tool

Generate pure-CSS loaders — spinners, dual rings, bouncing dots, bars and pulses — with adjustable size, colour and speed. Copy the HTML and CSS.

Common use cases

Drop a lightweight spinner into a page
Match a loader's colour and speed to your brand
Ship a loading state with no JavaScript