Animated Progress Bar

A progress bar that fills to a target percentage with a smooth animation. Customize the target width in the @keyframes and the gradient colors.

.progress-track {
  width: 100%;
  height: 6px;
  background: #1c1c1f;
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  border-radius: 3px;
  animation: fillBar 2s ease forwards;
  width: 0;
}
@keyframes fillBar {
  to { width: 75%; }
}