How to make bootstrap dynamic progress bar

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:

nbsp;html>


	<meta> 
	<title>Bootstrap 实例 - 动画的进度条</title>
	<link>
	<script></script>
	<script></script>



<div>
	<div aria-valuenow="60" style="width: 40%;">
		<span>40% 完成</span>
	</div>
</div>

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!