Bootstrap For Beginners - Part Nine ( Bootstrap Progress Bars )

Shaili Dashora
7y
10.3k
0
1

Article

I have started an article series on Bootstrap and published Eight articles so far. Read the previous eight parts here,

Introduction

In this article we will learn about Bootstrap Progress Bar component. In this article we will create Progress Bars with different styles using Bootstrap classes.

Bootstrap Progress Bar

Progress bars can be used to show the progress of a task or action to the users.

Now we will create different types of progress bars and see how it is useful for webpages.

Basic Progress Bar

We can create a default progress bar,by adding .progress class to a <div> element.

Example 1 : Creating Default Progress Bar

In this example to create a basic progress bar we will add a <div> with class .progress inside the container,now inside this <div>

we will add one more <div> with class .progress-bar, we will also add width in style attribute that indicate progress of task or action.

We will add .sr-only class for Progress Bar

.sr-only : It is used to hides an element to all devices except screen readers

We will add following properties for Progress Bar,

aria-valuenow : It is used to defines the current value for a range for Progress Bar
aria-valuemin :It is used to defines the minimum allowed value for a range
aria-valuemax :It is used to defines the maximum allowed value for a range

Lets create an example for Default Progress Bar by writing following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part9</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Basic Bootstrap Progress Bar (30% Complete)</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<span class="sr-only">30% Complete Process</span>
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output:

Progress Bar With Label

To show a visible progress status as a persentage we just remove the <span></span> with .sr-only class from the progress bar.

Example 2 : Progress Bar With Label

In this example we will create Progress Bar same like Example1 in this we want to show visible progress status so we will remove the <span> with .sr-only class from the progress bar.we will create Progress Bar With Label by writing following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part9</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Progress Bar With Label</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
30%
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output:

Colored Progress Bars with Contextual classes

Bootstrap provide Contextual classes for Progress Bar that is used to provide meaning through colors.

The contextual classes used with progress bars

.progress-bar-info
.progress-bar-success
.progress-bar-danger
.progress-bar-warning

Example 3 : Creating Progress Bars with Contextual classes

In this example to create Colored Progress Bars we will add <div> with class .progress inside the container, now inside this <div> we will add one more <div> with class .progress-bar and we will add Contextual classes here like .progress-bar-info,.progress-bar-success,.progress-bar-danger,.progress-bar-warning.we will also add width in style attribute that indicate progress of task or action.we will also add aria attributes for progress bar,by writing following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part9</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Colored Progress Bars with Contextual classes</h3>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100" style="width:30%">
30% Complete Process (Info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" style="width:50%">
50% Complete Process (Success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100" style="width:70%">
70% Complete Process (Danger)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90" aria-valuemin="0"
aria-valuemax="100" style="width:90%">
90% Complete Process (Warning)
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output:

Striped Progress Bars

To create the stripped progress bar we add class .progress-bar-striped to the .progress-bar class.

Example 4 : Striped Progress Bars

In this example we will create a basic Striped Progress Bar and also create colored Striped Progress Bars using contextual classes. by using following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part9</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Striped Progress Bar Basic</h3>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100" style="width:30%">
<span class="sr-only">30%</span>
</div>
</div>
<br />
<h3>Colored Striped Progress Bars with Contextual classes.</h3>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100" style="width:30%">
30% Complete Process (Info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" style="width:50%">
50% Complete Process (Success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100" style="width:70%">
70% Complete Process (Danger)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0"
aria-valuemax="100" style="width:90%">
90% Complete Process (Warning)
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output:

Animated Progress Bar

We can create the animated progress bar just adding .active class to .progress-stripped, .active class used to animates the stripes from right to left of Progress Bar.

Example 5 : Animated Progress Bar

In this example we will create Animated Progress Bar by writing following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part9</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Animated Progress Bar</h3>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100" style="width:50%">
50%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100" style="width:70%">
70% Complete Process (Success)
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output:

Stacked Progress Bars

We can create Stacked Progress Bar by placing multiple bars into the same <div class="progress">.

Example 6 : Stacked Progress Bars

In this example we will place multiple progress bars into the same .progress to stack them, in this we will stack one progress bar into three stacks it is used like an password meter it shows strength of password as Weak,Good and Strong it is useful in Forms or Webpages, see output by writing following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part9</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Stacked Progress Bar</h3>
<p>Example:<i>Password Meter</i></p>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:10%">
Weak
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:20%">
Good
</div>
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Strong
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output:

In this article we focused on Bootstrap Progress Bars.Then in next articles we will understand all the components of Bootstrap step by step.