纯CSS3书写的loader动画效果，当然可以搭配jq使用，还有react 和 Angular 版本
浏览器支持
效果演示地址
下载
直接下载链接：/s/1jIx0s4I 密码：oxln
github 地址
github 地址：/ConnorAtherton/loaders.css
npm 安装
npm i --save-dev loaders.css
Bower 安装
bower install loaders.css
使用
1、纯css3版本
引入 loaders.min.css创建元素并添加 class<div class="loader-inner ball-pulse"></div>
在创建的元素中插入适当的 div
<!DOCTYPE html5><head><link rel="stylesheet" type="text/css" href="demo.css"/><link rel="stylesheet" type="text/css" href="../loaders.css"/></head><body><main><div class="loaders"><div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div></div></main><script>document.addEventListener('DOMContentLoaded', function () {document.querySelector('main').className += 'loaded';});</script></body>
2、搭配 Jquery 使用
引入 loaders.min.css Jquery 和 loaders.css.js创建元素并添加 class<div class="loader-inner ball-pulse"></div>
loaders.css.js 会自动根据class 创建对应数量的 divloaders.css.js 调用
$('.loader-inner').loaders()
<!DOCTYPE html5><head><link rel="stylesheet" type="text/css" href="demo.css"/><link rel="stylesheet" type="text/css" href="loaders.min.css"/></head><body><main><div class="loader-inner ball-pulse"></div></main><script src="jquery-2.1.1.min.js"></script><script src="loaders.css.js"></script><script>document.addEventListener('DOMContentLoaded', function () {document.querySelector('main').className += 'loaded';});$('.loader-inner').loaders()</script></body>
结尾
react 版本react 版本github地址
angular 版本
angular 版本github地址
