🔄

CSS Loader Generator

Create animated loading indicators and spinners with customizable styles, colors, and animations.

Loader Settings

Loader Presets
Select a loader preset to apply common loading animation effects, or reset all values to default
Select the type of loading animation to generate
10px55px100px
Adjust the size of the loader from 10 to 100 pixels
0.5s2.75s5s
Adjust the animation duration from 0.5 to 5 seconds
Set the primary color for the loader animation
Set the secondary color for the loader animation

Visual Preview

Spinner Loader Preview
Loader updated: Type spinner, Duration 1s, Primary color #3b82f6

Generated CSS

Complete CSS Code:
.custom-loader {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

HTML Structure

Use this HTML structure with the generated CSS
<div class="custom-loader"></div>

Loader Properties

Type
spinner
Duration
1s
Size
40px
Colors