Progress Bar

Bandwidth

50%

50.01GB100GB


      <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.01GB100GB
Storage
85%
50.01GB100GB
Compute
105%
3.50hrs100hrs


      <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>