Bootstrap实现自定义进度条

第一步:定义一个显示进度条的div
<div class="progress progress-striped active">
    <div id="p1"  class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">div>
   <span class="sr-only">50% 完成span>
div>
第二步:在JavaScript中编写逻辑
$(document).ready(function(){
    var n=0;
    function progress(){
        $("#p1").css("width",n+"%");
        if(n<100){
            n+=5;
        }else{
            return;
        }
        $("#p1").html(n+"%");
        setTimeout(progress,3000);
    }
    progress();
});

你可能感兴趣的:(Bootstrap)