css loading(性能出色纯CSS实现的loading动画)
loaders.css是Github上一个使用纯粹的css实现的开源loading动画库,完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分,以避免复杂的绘画和布局计算。下面这张图是在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
- 创建一个元素并添加动画类(例如<div class="loader-inner ball-pulse"></div>)
- 将适当数量的<div>s插入该元素
jQuery(可选)
定制化
- 包括loaders.min.css,jQuery和loaders.css.js
- 创建一个元素并添加动画类(例如<div class="loader-inner ball-pulse"></div>)
- loaders.js 是为每个动画注入正确数量的div元素的简单帮助库
- 要初始化页面加载后添加的加载器,请选择div并调用loaders它们(例如$('.loader-inner').loaders())
- enjoy it!
- 更改背景颜色
将样式添加到正确的子div元素
.ball-grid-pulse > div { background-color: orange; }
- 更改尺寸大小
使用2D比例转换
浏览器兼容性
.loader-small .loader-inner { transform: scale(0.5, 0.5); }
衍生产物
- 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!
,
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com