English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap plugins

Bootstrap Progress Bars

This chapter will explain Bootstrap progress bars. In this tutorial, you will see how to use Bootstrap to create progress bars for loading, redirection, or action states.

Bootstrap progress bars use CSS3 transitions and animations to achieve this effect. Internet Explorer 9 and earlier versions and older versions of Firefox do not support this feature, Opera 12 Does not support animation.

Default progress bar

The steps to create a basic progress bar are as follows:

  • Add a class .progress of the <div>.

  • Next, add a <div> with a class .progress-bar an empty <div>.

  • Add a width style attribute with percentage representation, for example, style="width: 60%"; indicates that the progress bar is at 60% Position.

Let's see the following example:

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Progress bar</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="progress">
	<div class="progress"-bar"　role="progressbar"　aria-valuenow="60"
		　aria-valuemin="0"　aria-valuemax="100"　style="width:　40%;">
		<span class="sr-only">40% Completed</span>
	</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Alternating progress bar

The steps to create progress bars with different styles are as follows:

  • Add a class .progress of the <div>.

  • Next, add a <div> with a class .progress-bar and class progress-bar-* an empty <div>. Among them,* can be success, info, warning, danger.

  • Add a width style attribute with a percentage, for example, style="60%"; indicates that the progress bar is at 60% Position.

Let's see the following example:

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Alternating progress bar</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="progress">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　90%;">
		<span class="sr-only">90% Completed (Success)</span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-info" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　30%;">
		<span class="sr-only">30% Completed (Information)</span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-warning" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　20%;">
		<span class="sr-only">20% Completion (Warning)</span>
	</div>
</div>
<div class="progress">
	<div class="progress"-bar progress-bar-danger" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　10;">
		<span class="sr-only">10% Completed (Danger)</span>
	</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Striped Progress Bars

The steps to create a striped progress bar are as follows:

  • Add a class .progress and .progress-striped of the <div>.

  • Next, add a <div> with a class .progress-bar and class progress-bar-* an empty <div>. Among them,* can be success, info, warning, danger.

  • Add a width style attribute with a percentage, for example, style="60%"; indicates that the progress bar is at 60% Position.

Let's see the following example:

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Bootstrap Example　-　Striped Progress Bars/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-success" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　90%;">
　　　　　　　　<span class="sr-only">90% Completed (Success)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-info" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　30%;">
　　　　　　　　<span class="sr-only">30% Completed (Information)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-warning" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　20%;">
　　　　　　　　<span class="sr-only">20% Completion (Warning)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress"-bar progress-bar-danger" role="progressbar"
　　　　　　　　　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
　　　　　　　　　style="width:　10;">
　　　　　　　　<span class="sr-only">10% Completed (Danger)</span>
　　　　</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Animated Progress Bars

The steps to create an animated progress bar are as follows:

  • Add a class .progress and .progress-striped Add class .active.

  • Next, add a <div> with a class .progress-bar an empty <div>.

  • Add a width style attribute with a percentage, for example, style="60%"; indicates that the progress bar is at 60% Position.

This will give the stripes a sense of moving from right to left.

Let's see the following example:

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Animated Progress Bars</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="progress progress-striped active">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　40%;">
		<span class="sr-only">40% Completed</span>
	</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Stacked Progress Bars

You can even stack multiple progress bars. Place multiple progress bars in the same .progress Stacking is possible in the following example:

Online Example

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Stacked Progress Bars</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<div class="progress">
	<div class="progress"-bar progress-bar-success" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　40%;">
		<span class="sr-only">40% Completed</span>
	</div>
	<div class="progress"-bar progress-bar-info" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　30%;">
		<span class="sr-only">30% Completed (Information)</span>
	</div>
	<div class="progress"-bar progress-bar-warning" role="progressbar"
		　aria-valuenow="60"　aria-valuemin="0"　aria-valuemax="100"
		　style="width:　20%;">
		<span class="sr-only">20% Completion (Warning)</span>
	</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap Media ObjectsBootstrap Alerts