简单的进度条

最新推荐文章于 2022-12-10 06:08:23 发布

花生地瓜

最新推荐文章于 2022-12-10 06:08:23 发布

阅读量324

点赞数

分类专栏： pc-web前端开发

本文链接：https://blog.csdn.net/u013018357/article/details/50730152

版权

pc-web前端开发专栏收录该内容

21 篇文章 0 订阅

订阅专栏

  <div class="progressBar">
            <div id="bar"></div>
  </div>

css样式

 .progressBar{
    width: 200px;
    height: 8px;
    border: 1px solid #98AFB7;
    border-radius: 5px;
    margin-top: 10px;
 }
 #bar{
    width: 0px;
    height: 8px;
    border-radius: 5px;
    background: #5EC4EA;
 }
 js代码

  progressBar()

  function progressBar (){
    //初始化js进度条

    $("#bar").css("width","0px");

    //进度条的速度，越小越快
    var speed = 20;

    bar = setInterval(function(){
        nowWidth = parseInt($("#bar").width());
        if(nowWidth <= 200){
            barWidth = (nowWidth + 1)+"px";
            $("#bar").css("width" , barWidth);
        }else{
            //进度条读满之后，停止
            clearInterval(bar);
        }
    },speed)


  }