前端 - 动态进度条效果

话不多少,直接上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<style>	
			body{
				margin: 20px 0px;
			}
		</style>
	</head>
	<body>
			
		<div class="container">
			<div class="progress">
				<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:60%">
					60%
				</div>
				
				<div class="progress-bar progress-bar-sucess progress-bar-striped active" style="width:20%">
					20%
				</div>
			</div>
		</div>
	</body>
</html>

效果如下:

十分简洁的代码,就可以出现这样的特效。 

发布了60 篇原创文章 · 获赞 39 · 访问量 3771

猜你喜欢

转载自blog.csdn.net/qq_42992704/article/details/104280657