@limetech/lime-elements/dist/collection/components/linear-progress/linear-progress.css

Lime Elements

/**
 * @prop --background-color: Color to use for progress-bar track.
 */
:host(limel-linear-progress) {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--background-color, rgb(var(--contrast-800), 0.5));
}

.progress {
  height: 100%;
  width: var(--percentage, 0%);
  border-radius: 0.25rem;
  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
}

:host(limel-linear-progress[indeterminate]) .progress {
  background-color: transparent;
  width: 100%;
}
:host(limel-linear-progress[indeterminate]) .progress:before, :host(limel-linear-progress[indeterminate]) .progress:after {
  will-change: left, right, opacity;
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0.25rem;
  opacity: 0;
  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
}
:host(limel-linear-progress[indeterminate]) .progress:before {
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
:host(limel-linear-progress[indeterminate]) .progress:after {
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s;
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
    opacity: 0;
  }
  10%, 80% {
    opacity: 1;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
    opacity: 0;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
    opacity: 0;
  }
  10%, 80% {
    opacity: 1;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
    opacity: 0;
  }
}