JS CSS 进度条
html
<div id="show" class="show">
<div class="box">
<div class="line-box" id="line_box">
<div class="line" id="line"></div>
</div>
<div id="num" class="num">0%</div>
</div>
</div>
css
.show{
width: 600px;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
}
.line-box{
flex-shrink: 0;
width: 180px;
height: 14px;
border-radius: 14px;
overflow: hidden;
border: 1px solid #2979ff;
}
.line{
height: 100%;
border-radius: 14px;
background: #2979ff;
}
.num{
color: #2979ff;
}
js
let line_box = document.getElementById('line_box');
let line = document.getElementById('line');
let num = document.getElementById('num');
let lineLength = 0;
let setTime = setInterval(function(){ //模拟加载
lineLength += 1;
line.setAttribute('style', 'width: '+lineLength+'%'); // 设置进度条的长度
num.innerHTML = lineLength+'%'; //同步显示的值
if(lineLength >= 100){
// 加载完成后,修改进度条以及值得显示样式
line_box.setAttribute('style', 'background: #19be6b; border: 1px solid #19be6b;')
line.setAttribute('style', 'background: #19be6b;')
num.setAttribute('style', 'color: #19be6b;')
//清除计时器
clearInterval(setTime);
}
},20);