jay-js/ui/ProgressBar/ProgressBar.style.css

Jay is a framework for creating a single page application.

.progress-bar{
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.progress-bar-small {
  height: 0.5rem;
}

.progress-bar-medium {
  height: 1rem;
}

.progress-bar-large {
  height: 1.5rem;
}

.progress-bar-inner{
  height: 100%;
  background-color: var(--main-color);
  border-radius: 1rem;
} 

.progress-bar-infinite{
  width: 25%;
  animation: infinite-progress 1.0s linear infinite;
}

@keyframes infinite-progress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}