进度条效果在网站中很常见，比如首次打开一个网站的时候，会显示一个进度条，加载完成后，显示网页的内容。
这里直接附上实现代码
✨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)
