CSS Loader & Spinner Generator

18 pure CSS loading animations — spinners, dots, bars, skeletons and more. Customize color, size, and speed.

Customize

Color

#3b82f6

Size48px

Speed1.0s

Live Preview

Generated CSS

.loader {
  width: 48px;
  height: 48px;
  border: 6px solid #3b82f633;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}