介紹
loaders.css是Github上一個使用純粹的css實現的開源loading動畫庫,完全用CSS編寫的加載動畫的集合。每個動畫僅限於CSS屬性的一小部分,以避免複雜的繪畫和佈局計算。下面這張圖是在demo頁面截取的Gif效果圖,可供參考!
Github
就這樣一個小小的庫也收穫了9.5k的stars,以下是其倉庫源地址
https://github.com/ConnorAtherton/loaders.css
安裝方式
自由選擇安裝方式進行安裝使用
<code>bower install loaders.css/<code>
<code>npm i --save loaders.css/<code>
用法
1、標準用法
- 包括 loaders.min.css
- 創建一個元素並添加動畫類(例如)
- 將適當數量的s插入該元素
jQuery(可選)
- 包括loaders.min.css,jQuery和loaders.css.js
- 創建一個元素並添加動畫類(例如)
- loaders.js 是為每個動畫注入正確數量的div元素的簡單幫助庫
- 要初始化頁面加載後添加的加載器,請選擇div並調用loaders它們(例如$('.loader-inner').loaders())
- enjoy it!
定製化
- 更改背景顏色
將樣式添加到正確的子div元素
<code>.ball-grid-pulse > div {
background-color: orange;
}/<code>- 更改尺寸大小
使用2D比例轉換
<code>.loader-small .loader-inner {
transform: scale(0.5, 0.5);
}/<code>瀏覽器兼容性
- IE11
- Chrome 41+
- FireFox 36+
- Safari 8+
衍生產物
Loaders.css衍生了很多適用於其它平臺或框架的優秀庫,這些都是受Loaders.css的啟發而產生的
- 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
總結
Loaders.css是一個非常出色的loading動畫庫,可以將它運用到你任何新的或者現有的項目中,性能出眾,定製化,enjoy it!
閱讀更多 最美分享Coder 的文章