Loading Animations in 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%; }
}