bootstrap3-progress bar 进度条

最新推荐文章于 2025-04-30 22:11:07 发布

schy_hqh

最新推荐文章于 2025-04-30 22:11:07 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端@BootStrap3

本文链接：https://blog.youkuaiyun.com/schy_hqh/article/details/84515652

WEB前端@BootStrap3 专栏收录该内容

21 篇文章

订阅专栏

本文展示如何在网页中创建带有条纹、成功、信息、警告和危险样式的不同动态效果的进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态效果的进度条

<!-- striped条纹 active运动效果 -->
	
	<!-- 默认 -->
	<div class="progress progress-striped active">
		<div class="progress-bar" role="progressbar" style="width: 20%;">
			<span class="sr-only"></span>
		</div>
	</div>
	
	<!-- success样式 -->
	<div class="progress progress-striped active">
		<div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%;">
			<span class="sr-only"></span>
		</div>
	</div>
	
	<!-- info样式 -->
	<div class="progress progress-striped active">
		<div class="progress-bar progress-bar-info" role="progressbar" style="width: 60%;">
			<span class="sr-only"></span>
		</div>
	</div>
	
	<!-- warning样式 -->
	<div class="progress progress-striped active">
		<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 80%;">
			<span class="sr-only"></span>
		</div>
	</div>
	
	<!-- danger样式 -->
	<div class="progress progress-striped active">
		<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 99%;">
			<span class="sr-only"></span>
		</div>
	</div>