Progress Bar

Overview

Our Progress Bar is derived from Bootstrap. As is mentioned within Bootstrap's documentation, the progress bar does not use the <progress></progress> element. Learn more about Bootstrap's progress bar.

100%
75%
50%
25%
                                
<!-- Progress Bar -->
<div class="d-flex align-items-center justify-content-between">
    <div class="progress mb-3 w-auto flex-grow-1" role="progressbar" aria-label="Rating"
        aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar w-100">100%</div>
    </div>
</div>
<div class="d-flex align-items-center justify-content-between">
    <div class="progress mb-3 w-auto flex-grow-1" role="progressbar" aria-label="Rating"
        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar w-75">75%</div>
    </div>
</div>
<div class="d-flex align-items-center justify-content-between">
    <div class="progress mb-3 w-auto flex-grow-1" role="progressbar" aria-label="Rating"
        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar w-50">50%</div>
    </div>
</div>
<div class="d-flex align-items-center justify-content-between">
    <div class="progress mb-3 w-auto flex-grow-1" role="progressbar" aria-label="Rating"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar w-25">25%</div>
    </div>
</div>
<div class="d-flex align-items-center justify-content-between">
    <div class="progress mb-3 w-auto flex-grow-1" role="progressbar" aria-label="Rating"
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar w-0"></div>
    </div>
</div>