css3/loading.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>loading效果</title>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
        body {
            background: #0DCECB;
        }
        .layout {
            width: 800px;
            margin: 100px auto;
        }
        .loading_1 {
            position: relative;
            width: 20px;
            height: 50px;
            background: #fff;
            margin: 50px auto;
            animation: run infinite 1s ease-in-out;
            animation-delay: .2s;
        }

        .loading_1:before {
            position: absolute;
            left: -35px;
            content: '';
            display: block;
            width: 20px;
            height: 50px;
            background: #fff;

            animation: run infinite 1s ease-in-out;
        }

        .loading_1:after {
            position: absolute;
            top: 0;
            right: -35px;
            content: '';
            display: block;
            width: 20px;
            height: 50px;
            background: #fff;
            animation: run infinite 1s ease-in-out;
            animation-delay: .3s;
        }

        @keyframes run {
            0%, 60%, 100% {
                box-shadow: 0 0 #fff;
                height: 40px;
            }
            20% {
                box-shadow: 0 -20px #fff;
                height: 50px;
            }
        }

        .loading_2 {
            position: absolute;
            top: 30%;
            left: 50%;
            margin-left: -65px;
            width: 100px;
            height: 100px;
            border: 15px solid rgba(255,255,255, .3);
            border-top: 15px solid #fff;
            border-radius: 50%;
            animation: load infinite 1s linear;
        }

        @keyframes load {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="layout">
        <div class="loading_1"></div>
        <div class="loading_2"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>