CSS Loader Generator

Create customizable CSS loaders with different styles, sizes, colors and animation speeds.

Loader Type

Size48px

Speed1.0s

Color

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #3b82f633;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

What is CSS Loader Generator?

Generate lightweight loading animations using CSS without external images, JavaScript or animation libraries.

How to use

Choose a loader style.
Set the size, color and animation speed.
Preview the loading animation.
Copy the generated HTML and CSS.

Features

Pure CSS animations
Multiple loader styles
Custom colors
Adjustable animation speed
Live preview

Common Use Cases

Loading states
API requests
Form submissions
Page loading indicators
Web applications

Example

Input

Style: Spinner
Size: 40px
Color: #3498db
Speed: 1s

Output

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}