<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#outline {
/* 定义进度条的外边轮廓 */
width: 600px;
height: 40px;
border: 1px solid lightgray;
margin-top: 50px;
margin-left: 10px;
border-radius: 20px;
}
#initial-position {
/* 进度条起始位置，我们将通过js来控制它的当前进度 */
width: 0;
height: 40px;
background-color:#409EFF;/*进度条的填充颜色*/
border-radius: 20px;
}
#current-progress {
/* 监听百分比进度 */
margin-left: 10px;
}
</style>
</head>
<body>
<div id="outline">
<div id="initial-position"></div>
</div>
<span id="current-progress"></span>
<script>
let i = 0;//初始化一个计时器
let timer = setInterval(() => {//开启一个计时模式
i = i + 10;
document.getElementById("initial-position").style.width = i + "px";//让进度条的宽度每1毫秒+10px
document.getElementById("current-progress").innerHTML = parseInt((i / 600) * 100) + "%";//控制文字百分比的实时跟踪
if (i >= 600) {//如果大于进度的宽度，证明已经加载完毕了
clearInterval(timer);//进度条加载完毕后，让计时器停下来
confirm(‘进度条已经加载完毕！‘)
}
}, 120)
</script>
</body>
</html>
js进度条实现原理