介紹
loaders.css是Github上一個(gè)使用純粹的css實(shí)現(xiàn)的開源loading動(dòng)畫庫夫嗓，完全用CSS編寫的加載動(dòng)畫的集合删窒。每個(gè)動(dòng)畫僅限于CSS屬性的一小部分，以避免復(fù)雜的繪畫和布局計(jì)算艺玲。下面這張圖是在demo頁面截取的Gif效果圖，可供參考羞秤！
Github
就這樣一個(gè)小小的庫也收獲了9.5k的stars，以下是其倉庫源地址
https://github.com/ConnorAtherton/loaders.css
安裝方式
自由選擇安裝方式進(jìn)行安裝使用
bower install loaders.css
npm i --save loaders.css
用法
1左敌、標(biāo)準(zhǔn)用法
包括 loaders.min.css
創(chuàng)建一個(gè)元素并添加動(dòng)畫類（例如<div class="loader-inner ball-pulse"></div>）
將適當(dāng)數(shù)量的<div>s插入該元素
jQuery（可選）
包括loaders.min.css瘾蛋，jQuery和loaders.css.js
創(chuàng)建一個(gè)元素并添加動(dòng)畫類（例如<div class="loader-inner ball-pulse"></div>）
loaders.js 是為每個(gè)動(dòng)畫注入正確數(shù)量的div元素的簡(jiǎn)單幫助庫
要初始化頁面加載后添加的加載器，請(qǐng)選擇div并調(diào)用loaders它們（例如$('.loader-inner').loaders()）
enjoy it矫限！
定制化
更改背景顏色
將樣式添加到正確的子div元素
.ball-grid-pulse > div {
background-color: orange;
}
更改尺寸大小
使用2D比例轉(zhuǎn)換
.loader-small .loader-inner {
transform: scale(0.5, 0.5);
}
瀏覽器兼容性
IE11
Chrome 41+
FireFox 36+
Safari 8+
衍生產(chǎn)物
Loaders.css衍生了很多適用于其它平臺(tái)或框架的優(yōu)秀庫哺哼，這些都是受Loaders.css的啟發(fā)而產(chǎn)生的
React
https://github.com/jonjaques/react-loaders
Vue
https://github.com/Hokid/vue-loaders
Angular
https://github.com/Masadow
ember
https://github.com/kaermorchen/ember-cli-loaders
iOS
https://github.com/gontovnik/DGActivityIndicatorView
Android
https://github.com/varunsridharan/Loaders.CSS-Android-App
總結(jié)
Loaders.css是一個(gè)非常出色的loading動(dòng)畫庫，可以將它運(yùn)用到你任何新的或者現(xiàn)有的項(xiàng)目中叼风。
