Progress bars can be used for showing the progress of a task or action to the users. In Bootstrap, there are several types of progress bars.
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
<!DOCTYPE html>
<html>
<head>
<title>Default Progress Bar</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="72"
aria-valuemin="0" aria-valuemax="100" style="width:72%;">
<span class="sr-only">72% Complete</span>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Progress with label</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="72"
aria-valuemin="0" aria-valuemax="100" style="width:72%;">
72% Complete
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Contextual Alternatives</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
45% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="27" aria-valuemin="0" aria-valuemax="100" style="width: 27%">
27% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="63" aria-valuemin="0" aria-valuemax="100" style="width: 63%">
63% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
90% Complete
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Striped Progress Bars</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped"
role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
style="width: 45%">
45% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped"
role="progressbar" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100"
style="width: 27%">
27% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped"
role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100"
style="width: 63%">
63% Complete
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped"
role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"
style="width: 90%">
90% Complete
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Animated Prgress Bar</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="81" aria-valuemin="0" aria-valuemax="100" style="width:81%">
81% Complete
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Stacked Progress Bars</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 45%">
Mobiles
</div>
<div class="progress-bar progress-bar-warning" style="width: 23%">
Laptops
</div>
<div class="progress-bar progress-bar-danger" style="width: 12%">
Desktops
</div>
</div>
</div>
</body>
</html>