純粋な CSS3_html/css_WEB-ITnose で実装された 16 個の読み込みアニメーション

純粋な CSS3 で実装された 16 個の読み込みアニメーションを共有します。 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