0%
进度条
HTML
1
2
3
4
5
6
7
8
9
|
<div class="progress-dialog">
<strong>载入中...</strong>
<div class="progress-body">
<div class="progress-wrap">0%</div>
</div>
</div>
<button onclick="progressMove();">开始</button>
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
.progress-dialog{
position: fixed;
z-index: 999;
height: 100%;
width:100%;
top: 0;
left: 0;
background-color:rgba(0,0,0,0.1);
font-size: 1.5vw;
text-align:center;
display: none;
}
.progress-dialog strong{
display: block;
margin: 18% auto;
margin-bottom: 1%;
color: chocolate;
width:30%;
}
.progress-body{
margin: 0 auto;
width:30%;
border-radius: 15vw;
background-color: #bdd0e4;
}
.progress-wrap{
width: 0%;
background-color: #489ef9;
color: white;
border-radius: 15vw;
line-height: 5vh;
}
|
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function progressMove() {
var dialogPar = document.querySelector(".progress-dialog");
var dialogWrap = document.querySelector(".progress-wrap");
var wrapWidth = 0;
dialogPar.style.display = "block";
var temp = setInterval(function () {
if (wrapWidth >= 100) {
clearInterval(temp);
dialogPar.style.display = "none";
dialogWrap.style.width = "0%";
dialogWrap.innerHTML = "0%";
} else {
wrapWidth += 5;
dialogWrap.style.width = wrapWidth + '%';
dialogWrap.innerHTML = wrapWidth + '%';
}
}, 90);
}
|
