JS简单实现进度条效果

今天我们来学习一下，用JS来实现简单的进度条效果
首先我们先来到HTML部分

<div class="box1"></div>

css部分

.box1{
		width:500px;//先设置宽高
		height:200px;
		background-color: aqua;
        border-radius: 100px 100px 100px 100px;

接下来就到了咱们的重点部分，JS，咱们用JS来写，首先要想到的是应该怎么样去实现这个简单的进度条效果呢？
相信大家都接触过类似的进度条，进度条可以往前加，也可以往后减，怎么用就看大家应用在什么方面了。咱们可以先拿到div的宽度，加上一个定时器,然后让他自减，这样就可以实现一个简单的进度条效果了。

 var sty= document.querySelector(".box");
    var kd=sty.offsetWidth;
    var timer= setInterval(function(){
        kd-=10;
        sty.style.width=kd+'px';
        if(kd<=0){
            clearInterval(timer);
        }
    },100);