TTULAKITO
Designer

CSS Loader Generator

Generate pure CSS spinners and loading animations to copy.

All tools

Preview

CSS

<div class="loader"></div>

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

Frequently asked questions

When should I show a loader vs a skeleton screen?
Use a loader (spinner) for actions that finish in 1-10 seconds, like form submissions. Use skeleton screens for content that will fill the layout, since they show structure and feel faster perceptually.
How long should a spinner spin before something changes?
If a task takes longer than about 4 seconds, swap the spinner for a progress indicator or status message. Indefinite spinners make users wonder if the app froze.
Why does my CSS spinner stutter?
Animating border or width forces layout work on every frame. Use transform: rotate() on a single element and the animation will run on the GPU compositor, smooth even on weak devices.