Bootstrap 3 - SPLessons

Bootstrap Progress Bars

Chapter 25

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Progress Bars

Bootstrap Progress Bars

shape Description

Progress bar is used to display the progress of task completion. Bootstrap Progress Bars are of vertical gradient.

Default progress bar can be created by adding a class .progress to a <div> element.

shape Example

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.

<!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> 

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.

<!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>                                		

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.

<!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> 

Output:

Colored Progress Bars

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.

<!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>

Output:

Striped Progress Bar

shape Description

A .progress-striped class has to be added to .progress base class for displaying the progress bar with stripes.

shape Example

If observed in the below example, an extra class progress-striped is added to the .progress base class in <div>.

<!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 progress-striped">
		<div class="progress-bar" style="width: 60%;">
			<span class="sr-only">60% Complete</span>
		</div>
	</div>
</div>
</body>
</html>  

Output:

Striped and Colored Progress Bar

A colored and striped progress bars can be created by using .progress-striped and contextual classes.

<!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 progress-striped">
		<div class="progress-bar progress-bar-info" style="width: 20%">
            Disk Space: 80% free
		</div>
	</div>
	<div class="progress progress-striped">
		<div class="progress-bar progress-bar-success" style="width: 40%">
			Enough Disk Space: 60% free
		</div>
	</div>
	<div class="progress progress-striped">
		<div class="progress-bar progress-bar-warning" style="width: 80%">
			Low Disk Space: 80% full
		</div>
	</div>
	<div class="progress progress-striped">
		<div class="progress-bar progress-bar-danger" style="width: 90%">
            Not Enough Disk Space: 90% full
		</div>
	</div>
</div>
</body>
</html> 

Output:

Animated Progress Bar

shape Description

To show the striped progress bar animated, the class .active has to be used.

shape Example

In the below example, the active class is added to class progress inside <div> along with progress-striped.

<!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 progress-striped active">
		<div class="progress-bar progress-bar-info" style="width: 20%">
            Disk Space: 80% free
		</div>
	</div>
	<div class="progress progress-striped active">
		<div class="progress-bar progress-bar-success" style="width: 40%">
			Enough Disk Space: 60% free
		</div>
	</div>
	<div class="progress progress-striped active">
		<div class="progress-bar progress-bar-warning" style="width: 80%">
			Low Disk Space: 80% full
		</div>
	</div>
	<div class="progress progress-striped active">
		<div class="progress-bar progress-bar-danger" style="width: 90%">
            Not Enough Disk Space: 90% full
		</div>
	</div>
</div>
</body>
</html>

Output:

Disk Space: 80% free
Enough Disk Space: 60% free
Low Disk Space: 80% full
Not Enough Disk Space: 90% full

Stacked Progress Bar

shape Description

To display progress bar in stack format, place multiple bars into the same <div class=”progress”>.

shape Example

In the below example, three progress-bar classes have been placed in progress class and animation with stripes are also applied to the progress bar.

<!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 progress-striped active">
        <div class="progress-bar progress-bar-success" style="width: 40%">
            Program Files (40%)
        </div>
        <div class="progress-bar progress-bar-warning" style="width: 25%">
            Residual Files (25%)
        </div>
        <div class="progress-bar progress-bar-danger" style="width: 15%">
            Junk Files (15%)
        </div>
    </div>
</div>

Output:

Program Files (40%)
Residual Files (25%)
Junk Files (15%)

Summary

shape Key Points

  • Bootstrap Progress Bars are used to display the task progress.
  • The progress-bar class is placed in the progress class.
  • To show labels in progress bar, sr-only has to be removed in span.
  • Striped progress bars are created by using .progress-striped class.
  • Animation can be applied by using active in progress class.