loaders.css是Github上一个使用纯粹的css实现的开源loading动画库,完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分,以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图,可供参考!
就这样一个小小的库也收获了9.5k的stars,以下是其仓库源地址
https://github.com/ConnorAtherton/loaders.css
自由选择安装方式进行安装使用
bower install loaders.css
npm i --save loaders.css
1、标准用法
jQuery(可选)
将样式添加到正确的子div元素
.ball-grid-pulse > div {
background-color: orange;
}
使用2D比例转换
.loader-small .loader-inner {
transform: scale(0.5, 0.5);
}
Loaders.css衍生了很多适用于其它平台或框架的优秀库,这些都是受Loaders.css的启发而产生的
https://github.com/jonjaques/react-loaders
https://github.com/Hokid/vue-loaders
https://github.com/Masadow
https://github.com/kaermorchen/ember-cli-loaders
https://github.com/gontovnik/DGActivityIndicatorView
https://github.com/varunsridharan/Loaders.CSS-Android-App
Loaders.css是一个非常出色的loading动画库,可以将它运用到你任何新的或者现有的项目中,性能出众,定制化,enjoy it!