Bootstrap Progress Bar

Default Progress Bar

A progress bar is used when we need to progress about something to the users. It is not supported in IE9 and earlier.

Code Structure
<div class="container">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
            <span class="sr-only">70% Complete</span>
        </div>
    </div>
</div>

Progress Bar with Label

Code Structure
<div class="container">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
            70% Complete
        </div>
    </div>
</div>

Progress Bar with Colors

Code Structure
<div class="container">
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">
            20% Completed
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
            40% Completed
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
            60% Completed
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
            80% Completed
        </div>
    </div>
</div>

Stripped Progress Bar

Code Structure
<div class="container">
    <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
            70% Complete
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
            70% Complete
        </div>
    </div>
</div>

Animated Progress Bar

Code Structure
<div class="container">
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
            70% Complete
        </div>
    </div>
</div>

Stacked Progress Bar

Code Structure
<div class="container">
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" style="width:50%">
            Success
        </div>
        <div class="progress-bar progress-bar-info" role="progressbar" style="width:20%">
            Info
        </div>
        <div class="progress-bar progress-bar-danger" role="progressbar" style="width:10%">
            Danger
        </div>
    </div>
</div>

Share this

Related Posts