Home > Article > Web Front-end > How to make bootstrap dynamic progress bar

How to make bootstrap dynamic progress bar

(*-*)浩Original: 2019-07-11 13:52:064299browse

In this tutorial, you will see how to use Bootstrap to create a progress bar for loading, redirect, or action states.

Bootstrap progress bars use CSS3 transitions and animations to achieve this effect. Internet Explorer 9 and earlier and older versions of Firefox do not support this feature, and Opera 12 does not support animations. (Recommended learning: Bootstrap video tutorial)

Animated progress bar

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

Add a

with classes .progress and .progress-striped.

Add class .active at the same time.

Next, within the above

, add an empty

with class .progress-bar.

Add a style attribute with a width expressed in percentage, for example style="60%"; means the progress bar is at 60%.

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

Let us take a look at the following example:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 动画的进度条</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% 完成</span>
	</div>
</div>

</body>
</html>

For more Bootstrap related technical articles, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to make bootstrap dynamic progress bar. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use bootstrap font iconNext article：How to use bootstrap font icon

See more

How to make bootstrap dynamic progress bar

Related articles