Bootstrap 进度条代码

最新推荐文章于 2022-09-26 16:32:02 发布

boonyaxnn

最新推荐文章于 2022-09-26 16:32:02 发布

阅读量379

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 进度条

本文链接：https://blog.csdn.net/boonyaxnn/article/details/62236743

版权

Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 页面标题（Page Header）</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/bootstrap.min.css">
    <style type="text/css">
    	
    	div.progress{
    		margin: 30px 0px 30px 0px;
    	}
    </style>
</head>

<body>
<div class="container" style="padding-top: 10px;">
	             <!--基本的进度条-->
   <div class="progress">
   	  <div class="progress-bar" style="width: 80%;"> </div>
   </div>
                <!--不同样式的进度条-->
   <div class="progress">
   	  <div class="progress-bar progress-bar-info" style="width: 60%;"> </div>
   	  <span class="sr-only">已完成60%！</span>
   </div>
                 <!--带条纹的进度条-->
   <div class="progress progress-striped">
   	  <div class="progress-bar progress-bar-warning" style="width: 40%;"> </div>
   	  <span class="sr-only">已完成40%！</span>
   </div>
                       <!--会动的进度条-->
   <div class="progress progress-striped active">
   	  <div id="activeProcess" class="progress-bar progress-bar-success" style="width: 0%;"> </div>
   	  <span class="sr-only">已完成0%！</span>
   </div>
   
</div>  
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">

    var percent=0;
	$(function(){
		setInterval(function(){
			if(percent>100){
				percent=0;
			}
			$("#activeProcess").css("width",percent+"%");
			percent+=10;
			
		},1000);
	});
</script>
	</body>
</html>