Bootstrap Progress Bars and Spinners

Progress bars show how much of a task is done, and spinners show that something is loading, and the time is not known.

Progress bar

<div class="progress mb-3" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="With a label" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 60%">60%</div>
</div>
<div class="progress" role="progressbar" aria-label="Thin" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
  <div class="progress-bar bg-warning" style="width: 40%"></div>
</div>

The width of .progress-bar is the percent. Set the role and the aria-* values on the .progress wrapper for accessibility.

Striped, animated and stacked

<div class="progress mb-3" role="progressbar" aria-label="Striped" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 75%"></div>
</div>
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
</div>

Change the progress with JavaScript

<div class="progress" role="progressbar" aria-label="Upload" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" id="bar" style="width: 0%">0%</div>
</div>

const bar = document.getElementById('bar');
function setProgress(p) {
  bar.style.width = p + '%';
  bar.textContent = p + '%';
  bar.parentElement.setAttribute('aria-valuenow', p);
}
setProgress(70);
console.log('width: ' + bar.style.width + ', text: ' + bar.textContent + ', aria-valuenow: ' + bar.parentElement.getAttribute('aria-valuenow'));

Spinners

<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-grow text-success" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border spinner-border-sm text-danger" role="status"><span class="visually-hidden">Loading...</span></div>

Spinner in a button

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Saving...</span>
</button>

• The .visually-hidden text is for screen readers. Without it, the spinner has no meaning for them.
• Use the text color classes (text-primary) to change the color of the spinner.
• The sizes: .spinner-border-sm and .spinner-grow-sm, or set your own width and height.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.