Animated Progress Bar

.progress-container {
  width: 100%;
  height: 8px;
  background: #1a1a2e;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3a7bff, #8b5cf6);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Striped animated progress */
.progress-bar-striped {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #3a7bff,
    #3a7bff 10px,
    #5a8eff 10px,
    #5a8eff 20px
  );
  background-size: 200% 100%;
  animation: progress-stripes 1s linear infinite;
  border-radius: 4px;
}

@keyframes progress-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* Indeterminate loading */
.progress-indeterminate {
  width: 30%;
  animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
  0% { margin-left: 0; }
  50% { margin-left: 70%; }
  100% { margin-left: 0; }
}