Progress

Bootstrap Progress bar is a component which displays progress of a process in which user is involved. Their color, shape, and animation can be customized.

If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar. It means as much as “Everything is fine. The content you want to see will load in a few seconds”.

Rect Progress Default

html

         <div class="progress-container">
            <div class="progress-text progress-text-dark">69%</div>
            <div
              class="progress progress-dark"
              role="progress"
              min="0"
              max="100"
              value="69"
            >
              <div class="progress-bar"></div>
            </div>

Rect Progress Color Variants

html

          <div class="progress-container">
            <div class="progress-text progress-text-primary">20%</div>
            <div
              class="progress progress-primary"
              role="progress"
              min="0"
              max="100"
              value="20"
            >
              <div class="progress-bar"></div>
            </div>
          </div>
          <div class="progress-container">
            <div class="progress-text progress-text-secondary">30%</div>
            <div
              class="progress progress-secondary"
              role="progress"
              min="0"
              max="100"
              value="30"
            >
              <div class="progress-bar"></div>
            </div>
          </div>
          <div class="progress-container">
            <div class="progress-text progress-text-danger">80%</div>
            <div
              class="progress progress-danger"
              role="progress"
              min="0"
              max="100"
              value="80"
            >
              <div class="progress-bar"></div>
            </div>
          </div>
          <div class="progress-container">
            <div class="progress-text progress-text-success">43%</div>
            <div
              class="progress progress-success"
              role="progress"
              min="0"
              max="100"
              value="43"
            >
              <div class="progress-bar"></div>
            </div>
          </div>
          <div class="progress-container">
            <div class="progress-text progress-text-warning">72%</div>
            <div
              class="progress progress-warning"
              role="progress"
              min="0"
              max="100"
              value="72"
            >
              <div class="progress-bar"></div>
            </div>
          </div>
          <div class="progress-container">
            <div class="progress-text progress-text-info">3%</div>
            <div
              class="progress progress-info"
              role="progress"
              min="0"
              max="100"
              value="3"
            >
              <div class="progress-bar"></div>
            </div>
          </div>

RectProgress bar with Height

html

          <div class="progress-container">
            <div class="progress-text progress-text-dark">50%</div>
            <div
              class="progress progress-dark"
              role="progress"
              min="0"
              max="100"
              value="50"
              height="40"
            >
              <div class="progress-bar"></div>
            </div>
          </div>
          <div class="progress-container">
            <div class="progress-text progress-text-dark">90%</div>
            <div
              class="progress progress-dark"
              role="progress"
              min="0"
              max="100"
              value="90"
              height="5"
            >
              <div class="progress-bar"></div>
            </div>
          </div>
        </div>

Script

    <script src="../build/cdbbootstrap.js"></script>
    <script>
      [].slice
        .call(document.querySelectorAll('[role=progress]'))
        .forEach(progress => {
          new CDB.Progress(progress);
        });
    </script>