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://www.w2bc.com/Article/42264