进度条效果在网站中很常见，比如首次打开一个网站的时候，会显示一个进度条，加载完成后，显示网页的内容。
这里直接附上实现代码
✨html 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#progress {
border: 1px solid #000;
margin: 200px auto;
width: 502px;
height: 30px;
border-radius: 20px;
overflow: hidden;
box-shadow: 2px 3px 10px;
}
#son {
background: skyblue;
width: 0;
height: 30px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div id="progress">
<div id="son">0%</div>
</div>
<script src="index.js"></script>
</body>
</html>
✨JavaScript 部分
let progress = document.getElementById('progress'),
son = document.getElementById('son'),
speed = 0;
let timer = setInterval(() => {
if (son.style.width == '100%') {
clearInterval(timer)
} else {
son.innerText = speed + '%'
son.style.width = speed + '%'
speed++
}
}, 30)