Bootstrap Progress Bars

In this section, the progress bars in bootstrap will be discussed. The progress bars are used to indicate any progress or any action that is currently in process.


Default Progress Bar:

A progress bar in bootstrap can be created by using a <div> tag with .progress class. Within the same <div> tag, add another empty <div> which will have the class .progress-bar. At the end, you have to add the width in the style attribute which will indicate the so far progress in percentage.

Consider the following example in which we have used the default progress bar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap/ css / bootstrap. min . css ” rel = “stylesheet” >

< script src = “/ scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

</ head >

< body >

< div class = “progress” >

< div class = “progress- bar” role = “progressbar” aria- valuenow = “60”

aria- valuemin = “0” aria- valuemax = “100” style = “width: 34%;” >

< span class = “sr- only” > Progress 34% </ span >

</ div >

</ div >

</ body >

</ html >

The above example will generate the following result:

OUTPUT:

Default Progress Bar


Alternate Progress Bar:

A progress bar in bootstrap may have different styles. Toadd a progress bar of different style use the <div> tag with the .progress class. Then use another empty <div> tag within the same <div> tag and add the class .progress-bar. We can use different classes for different styles of progress bar like .progress-bar-success, etc. At the end, you have to add the width in the style attribute which will indicate the so far progress in percentage.

Consider the following example:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “progress”>

<div class = “progress-bar progress-bar-success” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 84%;”>

<span class = “sr-only”>Progress 84% (Success)</span>

</div>

</div>

<div class = “progress”>

<div class = “progress-bar progress-bar-info” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 38%;”>

<span class = “sr-only”>Progress 38% (Info)</span>

</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: 25%;”>

<span class = “sr-only”>Progress 25% (Warning)</span>

</div>

</div>

<div class = “progress”>

<div class = “progress-bar progress-bar-danger” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 12%;”>

<span class = “sr-only”>Progress 12% (Danger)</span>

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Alternate Progress Bar


Striped Progress Bar:

A striped progress bar can be created by using the <div> tag with the .progress class and .progress-stripped. Then use another empty <div> tag within the same <div> tag and add the class .progress-bar. We can use different classes for different styles of progress bar like .progress-bar-success, etc. At the end, you have to add the width in the style attribute which will indicate the so far progress in percentage.

Consider the following example in which we have created striped progress bar:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “progress progress-striped”>

<div class = “progress-bar progress-bar-success” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 84%;”>

<span class = “sr-only”>Progress 84%(Sucess)</span>

</div>

</div>

<div class = “progress progress-striped”>

<div class = “progress-bar progress-bar-info” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 32%;”>

<span class = “sr-only”>Progress 32% (Info)</span>

</div>

</div>

<div class = “progress progress-striped”>

<div class = “progress-bar progress-bar-warning” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style=”width: 25%;”>

<span class = “sr-only”>Progress 25% (Warning)</span>

</div>

</div>

<div class = “progress progress-striped”>

<div class = “progress-bar progress-bar-danger” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 12%;”>

<span class = “sr-only”>Progress 12% (Danger)</span>

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Striped Progress Bar


Animated Progress Bar:

Animated progress bar can be created in bootstrap by using the <div> tag with the .progress class and .progress-stripped. Then use another empty <div> tag within the same <div> tag and add the class .progress-bar. We can use different classes for different styles of progress bar like .progress-bar-success, etc. At the end, you have to add the width in the style attribute which will indicate the so far progress in percentage.

Consider the following example in which we have created animated progress bar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” >< /script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

</ head >

< body >

< div class = “progress progress- striped active” >

< div class = “progress- bar progress- bar- danger” role = “progressbar”

aria- valuenow = “60” aria- valuemin = “0” aria- valuemax = “100” style = “width: 24%;” >

< span class = “sr- only” > Progress 24% (Danger) </ span >

</ div >

< /div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Animated Progress Bar


Stacked Progress Bar:

A number of progress bars can be put together in the same .progress class to create a stacked progress bar. Consider the following example in which we have created stacked progress bar:

CODE:

<! DOCTYPE html >

<html >

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<div class = “progress”>

<div class = “progress-bar progress-bar-success” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 39%;”>

<span class = “sr-only”>Progress 39%</span>

</div>

<div class = “progress-bar progress-bar-info” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 24%;”>

<span class = “sr-only”>Progress 24% (info)</span>

</div>

<div class = “progress-bar progress-bar-warning” role = “progressbar”

aria-valuenow = “60” aria-valuemin = “0” aria-valuemax = “100” style = “width: 21%;”>

<span class = “sr-only”>Progress 21% (warning)</span>

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

OUTPUT