Bootstrap 进度条代码

来源：互联网发布：四川广电网络机顶盒编辑：程序博客网时间：2024/05/18 01:08
<!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>
0 0