纯CSS3制作的加载进度条
先看效果：
<html lang="en" manifest="/test-manifest.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<title></title>
<style>
.container{margin:50px;width:600px;height:20px;border-radius:4px;background:#efefef;box-shadow:inset 0 1px 2px #eaeaea}
.loading{border-radius:4px 0 0 4px;height:20px;animation:loading 1s infinite linear;background-image:linear-gradient(135deg,rgba(255,255,255,.15) 25%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,.15) 51%,rgba(255,255,255,.15) 100%);background-size:40px 40px}
@keyframes loading{from{background-position:-40px 0}
to{background-position:40px 0}
}
.per10{background-color:#ff4500;width:10%}
.per25{background-color:orange;width:25%}
.per50{background-color:#90ee90;width:50%}
.per75{background-color:#adff2f;width:75%}
</style>
</head>
<body>
<div class="container">
<div class="loading per10"></div>
</div>
<div class="container">
<div class="loading per25"></div>
</div>
<div class="container">
<div class="loading per50"></div>
</div>
<div class="container">
<div class="loading per75"></div>
</div>
</body>
</html>