纯CSS3制作的加载进度条

纯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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注