CSS Loader & Spinner Generator
23 pure-CSS loading animations. Tune size, colours, speed, thickness and easing, preview against any background, then copy the markup or export an image.
Animation
Preview — Ring
64pxStatic frame (PNG export)
Controls
Export
<div class="ld ring"><i></i></div>
.ld { position: relative; width: 64px; height: 64px; }
.ld i { display: block; box-sizing: border-box; }
.ld.dots, .ld.bars { display: flex; align-items: center; justify-content: center; gap: 12%; }
.ld.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8%; }
.ld.skel { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes pulse { 0%,100% { transform: scale(0.6); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }
@keyframes flip { 0% { transform: perspective(120px) rotateX(0) rotateY(0); } 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); } }
@keyframes ripple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes blink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes grow { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes hourglass { 0%,100% { border-radius: 50%; transform: scale(1) rotate(0); } 50% { border-radius: 10%; transform: scale(.65) rotate(180deg); } }
@keyframes heartbeat { 0%,100% { transform: scale(1); opacity: 1; } 14% { transform: scale(1.4); } 28% { transform: scale(1); } 42% { transform: scale(1.25); } 70% { transform: scale(1); opacity: .9; } }
@keyframes bump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-60%); } }
@keyframes barIndet { 0% { left: -40%; width: 40%; } 50% { width: 55%; } 100% { left: 100%; width: 40%; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.ld i { animation-duration: 1.1s; animation-iteration-count: infinite; }
.ld.ring i { width: 100%; height: 100%; border: 5px solid var(--c2); border-top-color: var(--c1); border-radius: 50%; animation: spin 1.1s linear infinite; animation-duration: 1.1s; }About this tool
Every loader is genuine CSS — keyframes, transforms, masks and gradients — rendered live in the preview; nothing is a video or a GIF. The PNG export redraws the same geometry on a canvas at the phase you pick, so you can grab a still frame for a mockup. All of it runs in your browser and the HTML export is a single self-contained file.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is CSS Loader Generator really free?
Yes. CSS Loader Generator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does CSS Loader Generator upload my data?
No. CSS Loader Generator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and CSS Loader Generator is ready to use on desktop or mobile.
Does CSS Loader Generator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More design & visual
CSS Gradient Generator
Create linear CSS gradients with a live preview.
CSS Box Shadow Generator
Build and preview CSS box-shadow values with one-click copy.
CSS Glassmorphism Generator
Generate frosted-glass CSS with backdrop blur and copy-ready styles.
QR Code Generator
Generate custom QR codes for any text or URL.
WiFi QR Code Generator
Generate a scannable QR code to share WiFi credentials instantly.
Letter Profile Picture
Generate avatar images from initials with custom colors.