插件描述：加载loading动画相信大家都经常看到，当我们需要从服务端异步无刷新加载一条数据的时候，考虑到会花费一定时间，而在这段时间内会呈现一个假死的状态，而这种状态时不能直接显示给用户的，那么这时我们就会用一个加载动画来告诉用户，数据正在加载中。
加载loading动画相信大家都经常看到，当我们需要从服务端异步无刷新加载一条数据的时候，考虑到会花费一定时间，而在这段时间内会呈现一个假死的状态，而这种状态时不能直接显示给用户的，那么这时我们就会用一个加载动画来告诉用户，数据正在加载中。
实现加载动画可以用一张预先做好的gif动态图片，但这种方式有一个缺点，做好的gif图片的大小和速度等参数都已经定死了，而要修改这些一张动态图片也是很麻烦的一件事。
所以今天我给大家介绍一款由js实现的loading动画，我们可以在使用中自定义各个参数，部署方便，很实用。
使用步骤
1、引入以下的js和css文件,其实该插件并不依赖于jquery库，在这里引用jquery只是为了方便使用
1 2 | <script type="text/javascript" src="spin.min.js"></script><script type="text/javascript" src="jquery.min.js"></script> |
2、在head标签中加入以下js代码
1 2 3 4 5 6 7 8 9 | <script type="text/javascript">$(function(){ var opts = { //参数列表 }; var target = document.getElementById('foo'); var spinner = new Spinner(opts).spin(target); })</script> |
3、在body标签中加入以下格式的html代码,实际上就是一个使用到loading动画的标签，注意这里的id要和上面调用函数的id相同
1 2 | <div id="foo"> </div> |
参数配置
我们将spin的参数定义在opts集合中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var opts = { lines: 13, // loading小块的数量 length: 7, // 小块的长度 width: 4, // 小块的宽度 radius: 10, // 整个圆形的半径 corners: 1, // 小块的圆角，越大则越圆 rotate: 0, // loading动画的旋转度数，貌似没什么实际作用 color: '#000', // 颜色 speed: 1, // 变换速度 trail: 60, // 余晖的百分比 shadow: false, // 是否渲染出阴影 hwaccel: false, // 是否启用硬件加速 className: 'spinner', // 给loading添加的css样式名 zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px}; |
可视化编辑参数
如果你觉得每次修改参数到预览很麻烦的话，也可以在官网进行可视化的参数设置，即一旦我们重置参数就能马上看到效果。
======以下代码由 布 提供======
“2、在head标签中加入以下js代码” 此处书写易引起误解。
1 | var spinner = new Spinner(opts).spin(target); |
该语句执行的结果为初始化spin，并且直接调用(显示)这个加载动画。可能会给初学者带来困惑。
建议改为：
1 2 3 4 5 6 7 8 9 10 11 12 13 | var opts = { //参数列表... };var target = document.getElementById('foo');//初始化spin-初始化函数中var spinner = new Spinner(opts);//建议将spinner作为全局变量，以方便后面的调用。//显示进度动画spinner.spin(target);//隐藏进度动画spinner.stop();//原文中未提及 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： JQUERY多变的幻灯片-COOLCAROUSELS-好看的轮循图片
- 下一个特效： 不容错过的漂亮界面框架-IN ADMIN PANEL