Progress Bars - Loading Indicators

Modern progress indicators with gradients, animations, and various states. Perfect for tracking loading states, task completion, and multi-step processes.

1. Linear Progress Bars with Gradients

.progress-container {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 75%; /* Determinate state */
  background: #2563eb;
  border-radius: 10px;
  transition: width 0.3s ease;
}

2. Circular/Radial Progress (Conic Gradient)

.circular-progress-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #2563eb 0% var(--progress),
    #e0e0e0 var(--progress) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular-progress-ring::before {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
}

3. Animated Loading Bars

/* Indeterminate Progress */
@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.3);
  }
  50% {
    transform: translateX(0%) scaleX(0.6);
  }
  100% {
    transform: translateX(100%) scaleX(0.3);
  }
}

/* Striped Progress */
.progress-striped {
  background: linear-gradient(
    45deg,
    rgba(255,255,255,.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 30px 30px;
  animation: progress-stripes 1s linear infinite;
}

4. Multi-Step Progress Indicators

.multi-step-progress::before {
  content: '';
  position: absolute;
  top: 20px;
  height: 4px;
  background: #e0e0e0;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
}

.step.active .step-circle {
  background: #2563eb;
  color: white;
  transform: scale(1.1);
}

.step.completed .step-circle {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

5. Skeleton Loading Bars

.skeleton-bar {
  height: 16px;
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #f0f0f0 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

6. Color Variations

7. Size Variations

8. Pulsing Progress

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}