我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
详细说明
进度条，现在前端页面上用的最多的一个功能。进入一个页面可以使用进度条表示页面加载的进度；在前端页面下载文件或者别的东西时，也可以使用进度条表示当前下载的实时进度；这个是一个挺实用的功能。这一次就来实现一个简单的进度条样式。
进度条需要的页面元素也不是很多，一个装进度条的容器、进度条状、进度的数字百分比，只需要三个就可以了。
首先，画出一个容器box，包含着进度条article，数字百分比和容器平齐。
<div id="app">
<div id="box">
<div id="article"></div>
</div>
<div id="text"></div>
</div>
html结构写好之后，就需要添加样式，进度条刚开始是空的，所以初始化的时候，进度条的宽度为0；它的宽度可以暂时不进行设置。上样式代码：
#app {
display: flex;
margin: 100px 100px;
}
#box {
width: 400px;
height: 20px;
border: 1px solid #ccc;
border-radius: 20px;
overflow: hidden;
margin-right: 10px;
}
#article {
height: 20px;
background-color: rgb(153, 238, 153);
}
写到这里的时候，进度条的基本样式就已经可以了，但是为了要进度条能动态的变长，需要通过js给进度条手动添加宽度。声明一个index表示每次增长百分之一，这里为了能体现出效果，采用setInterval，每200毫秒就添加百分之一。
当index的长度和box的长度一致时，就可以清除掉计时器了，此时进度条已经可以结束了。上代码：
let box = document.getElementById("article");
let text = document.getElementById("text");
let index = 0;
let id = setInterval(function() {
index += 4
box.style.width = `${index}px`;
text.innerText = `${index/4}%`
console.log(index)
if(index === 400) {
clearInterval(id);
text.innerText = '加载完成'
}
}, 100);
