Bootstrap4 Progress bar

The progress bar can be used to display the progress of tasks or operations to the user. The following example will show you how to create a simple progress bar with a vertical gradient.

The progress bar can display the completion process of the user's task.

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

Add a <div> with a .progress class <div>.
Next, inside the above <div>, add a <div> with a class .progress-bar an empty <div>.
Add a 'style' attribute with a percentage width, for example, style="width:70%" indicates that the progress bar is 70% position.

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Basic progress bar</h2>
　　<p>To create a default progress bar, add the class '.progress' to the container element, and '.progress' to the child element-Class 'bar' and set the progress bar status: :</p>
　　<div class="progress">
　　　　<div class="progress-bar" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Test See ‹/›

Progress bar height

The default height of the progress bar is 16px. We can use the CSS height attribute to modify it:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Progress bar height/h2>
　　<p>The default height of the progress bar is　16px. We can use the CSS height attribute to modify it:</p>　
　　<div class="progress" style="height:10px;">
　　　　<div class="progress-bar" style="width:40%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:20px;">
　　　　<div class="progress-bar" style="width:50%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:30px;">
　　　　<div class="progress-bar" style="width:60%;"></div>
　　</div>
</div>
</body>
</html>

Test See ‹/›

Progress bar label

Text can be added inside the progress bar, such as the progress percentage:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Progress bar text label/h2>
　　<div class="progress">
　　　　<div class="progress-bar" style="width:70%">70%</div>
　　</div>
</div>
</body>
</html>

Test See ‹/›

Progress bars with different colors

By default, the progress bar is blue, Bootstrap4 Also provides progress bars in the following colors:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Progress bars with multiple colors/h2>
　　<p>Bootstrap4　The following progress bar colors are provided:/p>　
　　<div class="progress">
　　　　<div class="progress-bar" style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info" style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Test See ‹/›

Striped progress bar

Use .progress-bar-striped class to set striped progress bar:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Striped progress bar/h2>
　　<p>Use .progress-bar-striped class to set striped progress bar:</p>　
　　<div class="progress">
　　　　<div class="progress-bar progress-bar-striped" style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Test See ‹/›

Animated progress bar

Use .progress-bar-animated class can add animation to the progress bar:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Animated progress bar/h2>
　　<p>Use .progress-bar-animated class can add animation to the progress bar:</p>　
　　<div class="progress">
　　　　<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
　　</div>
</div>
</body>
</html>

Test See ‹/›

Mixed color progress bar

Progress bars can be set to multiple colors:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Mixed Color Progress Bar</h2>
　　<p>Progress bars can be set with multiple colors:</p>　
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%">
　　　　　　Free Space
　　　　</div>
　　　　<div class="progress-bar bg-warning" style="width:10%">
　　　　　　Warning
　　　　</div>
　　　　<div class="progress-bar bg-danger" style="width:20%">
　　　　　　Danger
　　　　</div>
　　</div>
</div>
</body>
</html>

Test See ‹/›

Bootstrap4 Pagination Bootstrap4 Badge

Bootstrap4 Basic Tutorial

Bootstrap4 Progress bar

Progress bar height

Progress bar label

Progress bars with different colors

Striped progress bar

Animated progress bar

Mixed color progress bar