js简单进度条

js的简单进度条

样式

<style>
        .sliderBar-wrap {
        display: inline-block;
        width: 100%;
        border: 1px solid #ccc;
        margin: 15px 0px;
        position: relative;
    }
    .sliderBar {
        width: 100%;
        height: 10px;
        background-color: rgb(245, 172, 38);
        border-radius: 3px;
        animation: progress 10s linear ;
    }
    .sliderBar>.sliderBar-control {
        display: inline-block;
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        border: 1px solid rgb(240, 27, 194);
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: calc(100% - 25px);
        bottom: -85%;
        text-align: center;
        line-height: 25px;
        animation: move 10s linear ;
      
    }
    
    @keyframes progress {
        from {
            width: 0%;
            background-color: red;
        }
    
        to {
            width: 100%;
            background-color: green;
        }
    }
    
    @keyframes move {
        from {
            left: 0%;
        }
    
        to {
            left: calc(100% - 25px);
        }
    }
 </style>      

布局

    <div class="sliderBar-wrap">
    <div class="sliderBar">
        <div class="sliderBar-control">
            0
        </div>
    </div>
</div>

js代码

  <script>
var a = document.getElementsByClassName('sliderBar-control')[0]  
var count = 0
var timer = setInterval(function(){
    ++count
    a.innerHTML = count
    if(count>100){  
     
        clearInterval(timer)
       alert('已加载完毕,点击确定重新加载')
       history.go(0) 

    }
      
    },100);


</script>


进度条从0开始

到100停止的时候弹出一个加载完成的框，点确定的时候通过 history.go(0) 进行刷新页面 使进度条重新开始