Progress Bar

Bandwidth

50%

50.01GB 100GB
<section class="progress-bar">
  <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
    <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
      <span class="icon-chart-bar" aria-hidden="true"></span>
      <span class="text">Bandwidth</span>
    </h3>
    <p class="u-medium u-bold">50%</p>
  </div>
  <div class="progress-bar-container" style="--graph-size:50%"></div>
  <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
    <span class="progress-bar-text-used">50.01GB</span>
    <span class="progress-bar-text-max">100GB</span>
  </div>
</section>

Full Progress Bar Options

  • Bandwidth

    50%

    50.01GB 100GB
  • Storage

    85%

    50.01GB 100GB
  • Compute

    105%

    3.50hrs 100hrs
<ul class="u-flex-vertical u-gap-24">
  <li>
    <section class="progress-bar">
      <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
        <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
          <span class="icon-chart-bar" aria-hidden="true"></span>
          <span class="text">Bandwidth</span>
        </h3>
        <p class="u-medium u-bold">50%</p>
      </div>
      <div class="progress-bar-container" style="--graph-size:50%"></div>
      <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
        <span class="progress-bar-text-used">50.01GB</span>
        <span class="progress-bar-text-max">100GB</span>
      </div>
    </section>
  </li>
  <li>
    <section class="progress-bar">
      <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
        <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
          <span class="icon-folder" aria-hidden="true"></span>
          <span class="text">Storage</span>
        </h3>
        <p class="u-medium u-bold u-color-text-warning">85%</p>
      </div>
      <div class="progress-bar-container is-warning" style="--graph-size:85%"></div>
      <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
        <span class="progress-bar-text-used">50.01GB</span>
        <span class="progress-bar-text-max">100GB</span>
      </div>
    </section>
  </li>
  <li>
    <section class="progress-bar">
      <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
        <h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
          <span class="icon-lightning-bolt" aria-hidden="true"></span>
          <span class="text">Compute</span>
        </h3>
        <p class="u-medium u-bold u-color-text-danger">105%</p>
      </div>
      <div class="progress-bar-container is-danger" style="--graph-size:105%"></div>
      <div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
        <span class="progress-bar-text-used">3.50hrs</span>
        <span class="progress-bar-text-max">100hrs</span>
      </div>
    </section>
  </li>
</ul>