Loading Animations in CSS

From the CSS Animations cheat sheet · Practical Examples · verified Jul 2026

Loading Animations

Create engaging loading indicators and spinners

css
/* Dots Loading */
@keyframes dot-pulse {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

.dot { animation: dot-pulse 1.4s infinite; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

/* Progress Bar */
.progress-bar {
  animation: fill 2s ease forwards;
}

@keyframes fill {
  to { width: 100%; }
}
💡 Keep loading animations simple and smooth
⚡ Use CSS-only solutions when possible
📌 Skeleton screens improve perceived performance
✅ Match animation to brand personality

More CSS tasks

Back to the full CSS Animations cheat sheet