CSS Loader Generator
Pure CSS loading animation generator with multiple styles and customization.
⚙️ Settings
Preview
CSS Code
.loader {
width: 64px;
height: 64px;
border: 6px solid #3b82f620; /* Light version of color */
border-left-color: #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}HTML Code
<div class="loader"></div>
About This Tool
A simple and effective tool for generating pure CSS loading animations (Loaders). Achieve smooth loading effects using only CSS properties, with no JavaScript libraries or SVG required. Features classic styles like Spinner, Bouncing Dots, Pulse, and Bars. You can freely adjust the animation color, size, speed, and line thickness. All generated code is pure CSS, ensuring excellent performance and compatibility. Supports one-click copy for HTML and CSS code.
Features
- ⏳ Multiple Styles: Built-in classics like Spinner, Dots, Pulse, Bars, and Dual Ring
- 🎨 Customizable: Fully adjust color, size, line thickness, and animation speed
- ⚡ Pure CSS: 100% CSS3 animation code with no external dependencies
- 👁️ Live Preview: Instant visual feedback for all parameter changes
- 💻 Code Gen: Generates both HTML structure and CSS styles for immediate use