@innovaccer/design-system/css/src/components/progressBar.module.css

React components library project for Innovaccer Design System

.ProgressBar {
  width: 100%;
  border-radius: var(--border-radius-10);
  background: var(--secondary-lighter);
}

.ProgressBar-indicator {
  background-color: var(--primary);
  border-radius: var(--border-radius-10);
  transition: var(--duration--slow-01) var(--standard-expressive-curve);
  height: 100%;
}

.ProgressBar-indicator--small {
  height: var(--spacing-10);
}

.ProgressBar-indicator--regular {
  height: var(--spacing-20);
}

.ProgressBar-indicator--indeterminate {
  background-color: var(--primary);
  border-radius: var(--border-radius-10);
  position: absolute;
  bottom: 0;
  top: 0;
  width: 32%;
  animation: indeterminate-progress-bar 1.4s infinite linear;
}

@keyframes indeterminate-progress-bar {
  from {
    left: -32%;
  }
  to {
    left: 100%;
  }
}