僅CSS實作的加載動畫 – Loader.css

當網頁的頁面大小較大，使用者加載可能需要較長的時間，在這些情況下，我們一般會用到（加載）loading動畫，提示于使用者頁面在加載中，這些UX常識我想很多設計師都懂，但做一個GIF動畫有點麻煩，為了友善，看看今天分享的Loader.css，僅用CSS樣式就能實作一個loading動畫效果。

CSS實作的加載動畫 - Loader.css

目前有35個動畫效果，是以選擇還是挺多的。

loaders-demo-2

loaders-demo-3

使用方法

Step 1: 引入 loaders.min.css 和 loaders.css.js，這個JS僅是為了簡化動畫的DIV标簽，如果不加這個JS，那麼你的動畫就必須加上對應數量DIV标簽才能正常顯示動畫，是以建議加上，這樣語義化好會好些。

Step 2: HTML代碼，給loading元素加入動畫class，如下：

改變加載動畫顔色

此外你還要可以為loading動畫加上顔色，代碼如下：

.ball-grid-pulse > div {

background: orange;

}

浏覽器相容性

IE 9+

Firefox 36

Chrome 41

Safari 8

雖然不相容IE8或以下版本，但我覺得已經夠用了，目前現在用IE10和手機浏覽網頁的使用者也很多了。

樣式庫名稱：loaders.css

線上DEMO：http://connoratherton.com/loaders

下載下傳位址：https://github.com/ConnorAtherton/loaders.css

http://www.shejidaren.com/loader-css.html

https://connoratherton.com/loaders

https://github.com/ConnorAtherton/loaders.css