ProgressBar

Since browser support for styling the <progress> element is rather limited, we have opted to implement our own.

Basic progress bar

<div class="bf-progressbar" title="25%">
  <div class="bf-progressbar-progress" style="width: 25%"></div>
</div>

With label

<div class="bf-progressbar-wrapper">
  <div class="bf-progressbar">
    <div class="bf-progressbar-progress" style="width: 70%"></div>
  </div>
  <span class="bf-progressbar-label">70%</span>
</div>

Sizes

<div class="bf-progressbar-wrapper">
  <div class="bf-progressbar bf-progressbar-small">
    <div class="bf-progressbar-progress" style="width: 20%"></div>
  </div>
  <span class="bf-progressbar-label">20%</span>
</div>
<div class="bf-progressbar-wrapper">
  <div class="bf-progressbar bf-progressbar-large">
    <div class="bf-progressbar-progress" style="width: 55%"></div>
  </div>
  <span class="bf-progressbar-label">55%</span>
</div>

Disabled

<div class="bf-progressbar-wrapper">
  <div class="bf-progressbar bf-progressbar-disabled">
    <div class="bf-progressbar-progress" style="width: 69%"></div>
  </div>
  <span class="bf-progressbar-label">69%</span>
</div>

Sandbox

Changes between values are animated.

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bfl-grid bf-page-padding">
  <div class="bf-progressbar-wrapper">
    <div class="bf-progressbar">
      <div
        class="bf-progressbar-progress"
        style="width: 70%"
        id="progressElement"
      ></div>
    </div>
    <span class="bf-progressbar-label" id="progressLabel">70%</span>
  </div>
  <div>
    <button class="bf-button" id="demoButton">Set random value</button>
  </div>
</div>

<script>
  demoButton.addEventListener("click", () => {
    const randomPercentage = Math.round(Math.random() * 100) + "%";
    progressElement.style.width = randomPercentage;
    progressLabel.innerHTML = randomPercentage;
  });
</script>