Bootstrap实现自定义进度条

最新推荐文章于 2023-06-20 11:15:19 发布

Q_Jimmy

最新推荐文章于 2023-06-20 11:15:19 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/Q_Jimmy/article/details/50410041

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用Bootstrap实现一个自定义的动态进度条。首先，通过HTML定义了一个带 stripes 和 active 类的进度条div，并设置了初始宽度为50%。接着，在JavaScript中，当页面加载完成后，使用jQuery动态更新进度条的宽度和内容，每3秒增加5%，直到达到100%。

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

第一步：定义一个显示进度条的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();
});