@ozen-ui/kit/__inner__/esm/components/ProgressBar/ProgressBar.css

React component library

.ProgressBar {
  --progressbar-translate-x: translateX(0%);
  background-color: var(--progress-bar-trail-color);
  position: relative;
  block-size: 4px;
  display: block;
  overflow: hidden;
}

  .ProgressBar-ProgressLine {
    background-color: var(--progress-bar-stroke-color);
    border-radius: 3px;
    inline-size: 100%;
    display: block;
    block-size: inherit;
  }

  .ProgressBar_filled .ProgressBar-ProgressLine {
    border-radius: 0;
  }

  .ProgressBar_indefinite .ProgressBar-ProgressLine {
    animation: progress-bar-animation 2s linear infinite;
  }

  .ProgressBar:not(.ProgressBar_indefinite) .ProgressBar-ProgressLine {
    transition: transform var(--transition-slow);
    transform: var(--progressbar-translate-x);
    transform-origin: left;
  }

@keyframes progress-bar-animation {
  0% {
    transform: translateX(-125%);
  }

  100% {
    transform: translateX(125%);
  }
}