16款纯CSS3实现的loading加载动画

分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

 <div class="grid">
        <div class="cell">
            <div class="card">
                <span class="spinner-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="throbber-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="refreshing-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="heartbeat-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="gauge-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="timer-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="three-quarters-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="wobblebar-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="atebits-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="whirly-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="flower-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="dots-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="circles-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="plus-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="ball-loader">Loading&#8230;</span>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <span class="hexdots-loader">Loading&#8230;</span>
            </div>
        </div>
    </div>

css代码：

        body
        {
            background: #f3f6f9;
            font-family: sans-serif;
            font-weight: 100;
            font-size: 14px;
            margin: 0;
            padding: 20px;
        }
        .grid
        {
            overflow: hidden;
        }
        .cell
        {
            float: left;
            width: 25%;
            box-sizing: border-box;
            padding: 20px;
            display: table;
        }
        .card
        {
            background: white;
            border: 1px solid #c3c6cf;
            border-radius: 15px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            height: 200px;
        }
    </style>

via：http://***/Article/42264