<div class="progress progress--bar my-3">
  <div
    class="progress__status progress-bar"
    role="progressbar"
    aria-valuenow="0"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>

<div class="progress progress--bar my-3">
  <div
    class="progress__status progress__status--teal progress-bar"
    role="progressbar"
    aria-valuenow="0"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>

<div class="progress progress--bar my-3">
  <div
    class="progress__status progress__status--cyan progress-bar"
    role="progressbar"
    aria-valuenow="0"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>

<div class="progress progress--bar my-3">
  <div
    class="progress__status progress__status--green progress-bar"
    role="progressbar"
    aria-valuenow="0"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>

<script type="module" src="/dist/js/kampmann.umd.min.js"></script>

      

      @import 'bootstrap/scss/progress.scss';

.progress {
  --status: 0;

  &__status {
    width: calc(var(--status) * 1%);
    background-color: var(--highlight-color, $primary);

    &--teal {
      --highlight-color: #{$teal};
    }

    &--green {
      --highlight-color: #{$green};
    }

    &--cyan {
      --highlight-color: #{$cyan};
    }
  }
}

      

      <img src="/src/assets/images/graphics/loading.svg" alt="loading">