Bootstrap - Progress bars - Naukri Code 360

Q: What is a progress bar?

A progress bar is a graphical way of representing your progress, like - how far a process is done or assets loading or time.

Q: How do I make my bootstrap progress bar dynamic?

The bars we have discussed so far are static and dynamic bars require a better understanding and implementation of Javascript or typescript. The developer can code a function in any scripting language and integrate it with HTML code to make a progress bar dynamic.

Q: How do you animate a progress bar?

We can animate a progress bar by adding the classes .progress-bar-striped and .progress-bar-animated or .active. But to make the animation dynamic or toggle-able, a javascript function is a must.

Introduction

Progress bars are used to indicate that the assets are loading or in progress or that an action is taking place. The progress bars can also be used as a timer bar to indicate that time is running.

Let's look at a few progress bars with their working codes.

Progress bars

The progress bar can be created using the classes .progress to make the bar's outline and .progress-bar to fill the progress inside the bar with a certain width.

Note: Add these in the HTML file to make these codes work

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>

Default progress bar

To create a default progress bar:

Add a <div> container with a class .progress
Add another <div> with a class .progress-bar nested inside the previous <div>.
Add the width as style=" width: X%" to create a bar with the width of X%.
Specify the bar's color, label, and height (optional).

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Bootstrap Progress Bar</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
		integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
		integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
		integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
		crossorigin="anonymous"></script>
</head>

<body>
	<h2 align="center">Ninjas Playground</h2>
	<div class="container" style="margin-top: 50px">
		<p>A progress bar without any progress or 0% width</p>
		<div class="progress my-3">
			<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<p>A progress bar with 25% width</p>
		<div class="progress my-3">
			<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
				aria-valuemax="100"></div>
		</div>
		<p>A progress bar with label of 25% width</p>
		<div class="progress my-3">
			<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
				aria-valuemax="100">
				25%
			</div>
		</div>
	</div>
</body>

</html>

Output

Progressbar with background colors

To create a progress bar with different background colors, we must add the classes .progress and .progress-bar, just like we do for a default bar. We also add a few contextual classes for background color in Bootstrap like

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

These are the only contextual classes that can be used with progress bars.

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Coding Ninjas</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
	</script>
</head>

<body>
	<h2 align="center">Ninjas Playground</h2>
	<div class="container" style="margin-top: 50px">
		<h4>Progress Bars with different colors</h4>
		<div class="progress">
			<div class="progress-bar progress-bar-success" role="progressbar" style="width: 25%" aria-valuenow="25"
				aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 50%" aria-valuenow="50"
				aria-valuemin="0" aria-valuemax="100"></div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 50%" aria-valuenow="50"
				aria-valuemin="0" aria-valuemax="100"></div>
		</div>
	</div>
</body>

</html>

Output

Striped progress bar

To create a striped progress bar, we add a class .progress-bar-striped to create a striped pattern inside the bars. We can also add contextual classes to produce a striped bar with a background color.

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Bootstrap Progress Bar</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
		integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
		integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
		integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
		crossorigin="anonymous"></script>
</head>

<body>
	<h2 align="center">Ninjas Playground</h2>
	<div class="container" style="margin-top: 50px">
		<p>The .progress-bar-striped class adds stripes to the progress bars</p>
		<div class="progress my-2">
			<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10"
				aria-valuemax="100"></div>
		</div>
		<div class="progress my-2">
			<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"
				aria-valuenow="25" aria-valuemax="100"></div>
		</div>
		<div class="progress my-2">
			<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"
				aria-valuenow="50" aria-valuemax="100"></div>
		</div>
		<div class="progress my-2">
			<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"
				aria-valuenow="100" aria-valuemax="100"></div>
		</div>
	</div>
</body>

</html>

Output

Animated progress bars

The animation effect can be introduced to a progress bar by adding the classes .progress-bar-striped and .progress-bar-animated or .active class based on a few compilers and the version of bootstrap you are using.

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Bootstrap Progress Bar</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
		integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
		integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
		integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
		crossorigin="anonymous"></script>
</head>

<body>
	<h2 align="center">Ninjas Playground</h2>
	<div class="container" style="margin-top: 50px">
		<p>The .active class animates the progress bar</p>
		<div class="progress">
			<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
				aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
		</div>
	</div>
</body>

</html>

Output

Multiple progress bars

The progress bars can be of a variety of colors. We can also create them stacked with different colors in a single bar. To achieve this, we have to add the <div> container with .progress-bar and .progress-bar-color inside a single <div> with .progress class.

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Bootstrap Progress Bar</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
		integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
		integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
		integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
		crossorigin="anonymous"></script>
</head>

<body>
	<h2 align="center">Ninjas Playground</h2>
	<div class="container my-10" style="margin-top: 50px">
		<p>Multiple stacked bars</p>
		<div class="progress">
			<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
				aria-valuemax="100"></div>
			<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30"
				aria-valuemin="0" aria-valuemax="100"></div>
			<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
				aria-valuemax="100"></div>
		</div>
	</div>
</body>

</html>

Output

Frequently Asked Questions

What is a progress bar?

A progress bar is a graphical representation of your progress, like - how far a process is done or assets loading or time.

How do I customize a bootstrap progress bar?

A bootstrap bar can be customized according to the size and color you want by giving inline or external CSS or contextual bootstrap classes to fill the background colors.

How do I make my bootstrap progress bar dynamic?

The bars we have discussed are static and dynamic and require a better understanding and implementation of Javascript or typescript. The developer can code a function in any scripting language and integrate it with HTML code to make a progress bar dynamic.

How do you animate a progress bar?

We can animate a progress bar by adding the classes .progress-bar-striped and .progress-bar-animated or .active. But a javascript function is necessary to make the animation dynamic or toggle-able.

Can I create a stacked Bootstrap progress bar?

Using multiple progress bars inside a container, you can create a stacked Bootstrap progress bar.

Check this out - Bootstrap Accordion

Conclusion

Let’s discuss the article in brief again:

The bootstrap progress bars are a graphical way of representing your progress, like - how far a process is done or assets loading or time.
A progress bar can be created using .progress and .progress-bar classes within nested <div> containers.
The progress bars can be colored, striped, animated, and made dynamic too, according to the user's requirements.

Hey Ninjas! Web development is an interesting technology, right? If you want to become an expert in web development, we suggest you go through the best course we have found you.

Happy Learning!