效果如图!
```html
<!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="width: 55%; background:#005394;">
<span>55%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%; background:#d9534f;">
<span>100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 40%; background:#f0ad4e;">
<span>40%</span>
</div>
</div>
</div>
</body>
</html>
```
```css
*{padding:0; margin:0;}
.container{
margin: 0 auto;
width: 60%;
padding:20px;
}
.progress{
margin-top: 50px;
padding: 10px;
background: grey;
border-radius: 5px;
height: 20px;
}
.progress::after{
content:"";
display: block;
margin-top: 9px;
width: 100%;
border-top: dashed 3px white;
}
.progress .progress-bar {
float: left;
height: 100%;
position: relative;
}
.progress .progress-bar span{
display: block;
width: 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;
}
```
```javascript
<script>
var span = document.getElementsByTagName("span");
for (var i = 0; i < span.length; i++) {
span[i].onmousedown = function(eve){
var e = eve || event;
var x = e.offsetX;
var _this = this;
this.parentNode.parentNode.onmousemove = function(eve){
var e = eve || event;
var l = e.pageX - x - this.offsetLeft;
var maxL = _this.parentNode.parentNode.offsetWidth-_this.offsetWidth/2;
l = l < 0 ? 0 : (l > maxL ? maxL : l);
_this.innerHTML = parseInt((l / maxL)*100)+"%"
_this.parentNode.style.width = l + "px";
_this.style.left = l + "px";
}
this.parentNode.parentNode.onmouseup = function(eve){
this.onmousemove = null;
}
return false;
}
}
</script>
```
