How to make bootstrap dynamic progress bar-Bootstrap Tutorial-php.cn

How to make bootstrap dynamic progress bar

(*-*)浩

Release： 2019-07-11 13:52:06

Original

4423 people have browsed it

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

How to make bootstrap dynamic progress bar

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>

Copy after login

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!

Related labels：

bootstrap

source：php.cn

Previous article：How to use bootstrap font icon Next article：The difference between easyui and bootstrap

Statement of this Website

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