CSS3实现加载中效果

代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>loading</title>
    <style>
        body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100vh; }
        .Loader { height: 30px; width: 90px; position: relative; }
            .Loader .Bar { background: #04C096; height: 0; position: absolute; bottom: 0; width: 10px; border-radius: 2px; }
                .Loader .Bar:nth-child(0) { left: -15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0s; animation: bottom-top 2s infinite ease-in-out 0s; }
                .Loader .Bar:nth-child(1) { left: 0px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.2s; animation: bottom-top 2s infinite ease-in-out 0.2s; }
                .Loader .Bar:nth-child(2) { left: 15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.4s; animation: bottom-top 2s infinite ease-in-out 0.4s; }
                .Loader .Bar:nth-child(3) { left: 30px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.6s; animation: bottom-top 2s infinite ease-in-out 0.6s; }
                .Loader .Bar:nth-child(4) { left: 45px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.8s; animation: bottom-top 2s infinite ease-in-out 0.8s; }
                .Loader .Bar:nth-child(5) { left: 60px; -webkit-animation: bottom-top 2s infinite ease-in-out 1s; animation: bottom-top 2s infinite ease-in-out 1s; }
                .Loader .Bar:nth-child(6) { left: 75px; -webkit-animation: bottom-top 2s infinite ease-in-out 1.2s; animation: bottom-top 2s infinite ease-in-out 1.2s; }

        @-webkit-keyframes bottom-top {
            0% { height: 0; opacity: 0; }
            50% { height: 30px; opacity: 1; }
            100% { height: 0; opacity: 0; }
        }

        @keyframes bottom-top {
            0% { height: 0; opacity: 0; }
            50% { height: 30px; opacity: 1; }
            100% { height: 0; opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="Loader">
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
        <div class="Bar"></div>
    </div>
</body>
</html>

来源：http://codepen.io/jackoliver/pen/ORpQBv

相关阅读:
Quartz Cron表达式详解
面向对象设计的SOLID原则
JDK动态代理Demo代码，简单易懂
<x:forEach/>遍历RSS新闻
<x:parse/>获取RSS新闻
fn:length()方法
使用一个map映射出两个对象，再把两者关系对应起来
用户注册_发邮件，激活
ajax 的json联动
封装ajax小工具：

原文地址：https://www.cnblogs.com/talentzemin/p/5919860.html