JS进度条

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Amy_cloud/article/details/84338324

 <span class="data"></span>
    <div class="main">
        <div class="line"></div>
        <div class="inner"></div>
        <i></i>
    </div>

<style type="text/css">
body{background: #f2f2f2;}
.main{height: 6px;width:500px;margin:100px auto;}
.inner{height: 6px;width: 0;background: #e4a348;position: relative;top: 8px;left: 5px;border-radius: 2px;overflow: hidden;}
.line{position: relative;left: 5px;top: 14px;width: 560px;border-top: 2px dashed #fff;}
.data{color:  #3fc1b5; position: absolute; left: 350px;top: 75px;text-align: center;text-align: center;line-height: 35px;font-size: 12px;}
i{display: inline-block;position: absolute;top: 85px;left: 330px;}
i::before{content: '\21A3';color:  #3fc1b5;font-size: 35px;}
</style>

var _width =0;
var timer;
timer = setInterval(function(){
    _width +=5;
    if(_width>150){
        document.getElementsByClassName("inner")[0].style.background="#37a1d4";
    }
    if(_width>350){
        document.getElementsByClassName("inner")[0].style.background="#4acec8";
    }
    if(_width>=490){
        clearInterval(timer);
    }
    document.getElementsByClassName("inner")[0].style.width=_width+"px";
    document.getElementsByTagName("i")[0].style.left=340+_width+"px";
    var _data = Math.floor((_width/560)*100);
    document.getElementsByClassName("data")[0].innerText = _data+"%";
    document.getElementsByClassName("data")[0].style.left=350+_width+"px";
},1000/5);