CSS Loader Generator

Create beautiful, customizable CSS loaders with real-time preview and code generation. Perfect for your web projects!

Customize Your Loader

Loader Type

Loader Color

Loader Size

Small Medium Large

Animation Speed

Slow Normal Fast

Background Color

Preview

Generated Code

/* CSS Loader Code */
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #e2e8f0;
    border-top: 5px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}