2017了,IE9以下的浏览器份额越来越低,直接使用CSS3实现即可。
<!DOCTYPE html>
<html>
<head>
<style>
.progress {
background: #8ac6f7;
border: 1px solid #c1c1ff;
width: auto;
height: 10px;
-webkit-animation-name: example;
-webkit-animation-duration: 2s;
animation-name: loading;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes loading {
0% {
width: 0;
}
10% {
width: 10%;
}
20% {
width: 20%;
}
30% {
width: 30%;
}
40% {
width: 40%;
}
50% {
width: 50%;
}
60% {
width: 60%;
}
70% {
width: 70%;
}
80% {
width: 80%;
}
90% {
width: 90%;
}
100% {
width: 100%;
}
}
/* Standard syntax */
@keyframes loading {
0% {
width: 0;
}
10% {
width: 10%;
}
20% {
width: 20%;
}
30% {
width: 30%;
}
40% {
width: 40%;
}
50% {
width: 50%;
}
60% {
width: 60%;
}
70% {
width: 70%;
}
80% {
width: 80%;
}
90% {
width: 90%;
}
100% {
width: 100%;
}
}
.loader {
width: 120px;
border: 1px solid #b1b1ff;
height: 50px;
margin: 0 auto;
text-align: center;
font-size: 13px;
line-height: 2;
background: #d7edff;
}
</style>
</head>
<body>
<div class="loader">
<span>加载中...</span>
<div class="progress"></div>
</div>
</body>
</html>