介紹
Loaders.css是Github上一個使用純粹的css實現(xiàn)的開源loading動畫庫,完全用CSS編寫的加載動畫的集合。每個動畫僅限于CSS屬性的一小部分,以避免復(fù)雜的繪畫和布局計算。下面這張圖是在demo頁面截取的Gif效果圖,可供參考!
Github
就這樣一個小小的庫也收獲了9.5k的stars,以下是其倉庫源地址
https://github.com/ConnorAtherton/loaders.css
安裝方式
自由選擇安裝方式進行安裝使用
bower install loaders.css
npm i --save loaders.css
用法
1、標準用法
包括 loaders.min.css
創(chuàng)建一個元素并添加動畫類(例如<div class="loader-inner ball-pulse"></div>)
將適當數(shù)量的<div>s插入該元素
jQuery(可選)
包括loaders.min.css,jQuery和loaders.css.js
創(chuàng)建一個元素并添加動畫類(例如<div class="loader-inner ball-pulse"></div>)
loaders.js 是為每個動畫注入正確數(shù)量的div元素的簡單幫助庫
要初始化頁面加載后添加的加載器,請選擇div并調(diào)用loaders它們(例如
$('.loader-inner').loaders())
定制化
更改背景顏色
將樣式添加到正確的子div元素
.ball-grid-pulse > div {
? background-color: orange;
}
更改尺寸大小
使用2D比例轉(zhuǎn)換
.loader-small .loader-inner {
? transform: scale(0.5, 0.5);
}
總結(jié)
Loaders.css是一個非常出色的loading動畫庫,可以將它運用到你任何新的或者現(xiàn)有的項目中,性能出眾,定制化。