html+css+js 写一个简单的进度条

html部分

    <div class="progeress">//这是进度条的框
            <div class="progeressBar"></div>//进度条加载
        </div>
        <div id="text">0%</div>//数字加载

CSS部分

.progeress{
                width: 200px;
                height: 30px;
                border: 1px solid red;
            }
            .progeressBar{
                height: 100%;
                width: 0%;//进度条的宽度先设置为0
                background-color: aqua;
            }
            #text{
                padding-top: 1%;
            }

JS部分

var progeressBar=document.querySelector('.progeressBar');//获取到进度条加载的标签
        var text=document.getElementById('text');//获取到数字加载标签
        var width=0;//设定进度条初始宽度为0
         var m=0;//数字加载初始值为0
        var interVal=setInterval(function(){//设定一个计时器
            width +=1;//宽度每次加1
            m+=1;//数字每次加1
            progeressBar.style.width=width +'%';//变化的进度条内容样式宽度加1
            text.innerHTML=m+'%';
            if(width===100 && m===100){//当进度条的宽度和数字等于100时
                clearInterval(interVal);//清除定时器，加载停止
            }
        },100)//100毫秒