css部分
*{padding:0; margin:0;}
.container{
margin: 0 auto;
60%;
padding:20px;
}
.progress{
margin-top: 50px;
padding: 10px;
background: grey;
border-radius: 5px;
height: 20px;
}
.progress::after{
content:"";
display: block;
margin-top: 9px;
100%;
border-top: dashed 3px white;
}
.progress .progress-bar {
float: left;
height: 100%;
position: relative;
}
.progress .progress-bar span{
display: block;
40px;
height: 30px;
background: #333;
position: absolute;
right: -40px;
top: -50px;
color: white;
text-align:center;
line-height: 30px;
border-radius: 3px;
}
.progress .progress-bar span::before{
position: absolute;
font-family: fontawesome;
content: "f0d7";
font-size: 24px;
color: #333;
top: 18px;
right: 13px;
}
.progress .progress-bar span::after{
position: absolute;
font-family: fontawesome;
content: "f072";
font-size: 48px;
color: #333;
transform: rotateZ(45deg);
top: 47px;
right: 5px;
}
html部分和js部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap飞机跑道进度条动画特效 - 站长素材</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="progress">
<div class="progress-bar" style=" 55%; background:#005394;">
<span>55%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" style=" 100%; background:#d9534f;">
<span>100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" style=" 40%; background:#f0ad4e;">
<span>40%</span>
</div>
</div>
</div>
</body>
</html>
<script>
var ps = document.getElementsByClassName("progress-bar");
for( let i = 0 ; i < ps.length ; i++ ){
let timer = setInterval( ()=>{
if( parseInt( ps[i].style.width ) == 100 ){
clearInterval( timer );
}else{
ps[i].style.width = parseInt( ps[i].style.width ) +1 + "%";
ps[i].children[0].innerHTML = ps[i].style.width;
}
},60 )
}
</script>