In the below example, progress class is placed in <div> element with a
progress-bar class inside having a width of 60% showing the users that 60% of process is completed.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Progress Bar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</body>
</html>
[/html]
Output:
Progress Bars with Labels
For showing the task progress in percentages, label has to be used. For that, it is required to remove the
.sr-only class in <span> within the progress bar as demonstrated in the above example.
[html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Progress Bar with Label</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" style="width: 60%;">
60%
</div>
</div>
</div>
</body>
</html>
[/html]
Output:
Progress Bars with small widths
When showing percentage label, min-width to the progress bar has to be added to confirm that the label text remains readable even for low percentages. Below example demonstrates this concept.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Progress Bar with Label and Min-width</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
.progress-bar{
color: white;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" style="min-width: 2px; color:black">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="min-width: 20px; width: 5%;">
5%
</div>
</div>
</div>
</body>
</html>
[/html]
Output:
A meaning can be assigned to colors for Progress bars using Contextual classes.
The contextual classes that can be used with progress bars are:
- .progress-bar-success
- .progress-bar-info
- .progress-bar-warning
- .progress-bar-danger
Below is an example showing the use of contextual classes with progress-bars.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Progress Bar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">
Disk Space: 80% free
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%">
Enough Disk Space: 60% free
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 80%">
Low Disk Space: 80% full
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 90%">
Not Enough Disk Space: 90% full
</div>
</div>
</div>
</body>
</html>
[/html]
Output: