HI WELCOME TO Sirees

Bootstrap progress bars

In this we will discuss the bootstrap progress bar component. 

Bootstrap tutorial for beginners

Progress bars are used for showing the progress of tasks such as downloading a file, software installation etc. 
bootstrap progress bar example 

To create a progress bar, create 2 nested <div> elements with progress and progress-bar classes as shown below
<div class="progress">
    <div class="progress-bar" style="width:70%;">
    </div>
</div>

To display the completed percentage on the progress bar, include the percentage in the inner div element. 
bootstrap progress bar with percentage 

<div class="progress">
    <div class="progress-bar" style="width:70%;">
        70%
    </div>
</div>

To display low percentage values like 0%, 1% etc, make sure to include min-width style on the progress bar. 
bootstrap progress bar text cut off 

<div class="progress">
    <div class="progress-bar" style="width:1%min-width:20px">
        1%
    </div>
</div>

To create stripped progress bar add progress-bar-striped class along with progress-barclass on the inner <div> element. 
bootstrap progress bar striped 

<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:80%;">
        80%
    </div>
</div>

To create progress bars with different colour schemes, use progress bar contextual classes 
bootstrap progress bar color change 

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%;">
        20%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:40%;">
        40%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:60%;">
        60%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:80%;">
        80%
    </div>
</div>

To create striped progress bars with different colour schemes, just add progress-bar-striped class  
bootstrap striped progress bar color change 

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped"style="width:20%;">
        20%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:40%;">
        40%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped"style="width:60%;">
        60%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped"style="width:80%;">
        80%
    </div>
</div>

To create animated stripped progress bars just add active class along with progress-bar-striped class
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active"style="width:20%;">
        20%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active"style="width:40%;">
        40%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped active"style="width:60%;">
        60%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped active"style="width:80%;">
        80%
    </div>
</div>

To create a stacked progress bar, simply place the individual progress bars in a single div with class progress. 
bootstrap stacked progress bar 

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active"style="width:25%;">
        Login
    </div>

    <div class="progress-bar progress-bar-info progress-bar-striped active"style="width:25%;">
        Shipping
    </div>

    <div class="progress-bar progress-bar-warning progress-bar-striped active"style="width:25%;">
        Payment
    </div>
</div>

If you do not want the animation remove the active class and if you do not want stripes remove progress-bar-striped class