当我们ajax提交一个按钮的时候，给那个按钮来个Loading效果会高端很多，体验也会上升个层次。
既能让用户知道正在提交中，也能防止二次提交，好处多多呢。
image.png
上面的这个圈圈是会滚动的。简单点的话，可以直接用GIF动态图片实现。不过现在已经有了CSS3和HTML5了，多了好几种高大上的实现方式。
这里先来介绍几个动画的在线demo，第一个是HTML5 Boilerplate中的Effeckt.css，第二个是Animate.css。
下面一一列出，如果要结合按钮的话，可自行修改下CSS或JS等文件。当要嵌入到实际项目中的时候，可能会改动一些地方，以实际情况为准了。

一、PNG图片+CSS3动画

正在载入中….

.pull-up-loading .pull-icon { background-position: 0 100%; /chrome/ -webkit-transform: rotate(0deg) translateZ(0); -webkit-transition-duration: 0ms; -webkit-animation-name: loading; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /chrome/ @-webkit-keyframes loading { from { -webkit-transform: rotate(0deg) translateZ(0); } to { -webkit-transform: rotate(360deg) translateZ(0); } }
image.png
点击查看在线实例：

  1. 只有当加上pull-up-loading，才会出现滚动
  2. 添加一个动画keyframes，叫loading，是在做transform: rotate操作，下面的CSS省略了firefox中的动画代码，为了看的清晰点，实例中有完整的firefox代码

这里有个在线生成Loading的纯CSS代码，cssload.net。样式选择还是挺多的，就是对于老一点的浏览器的兼容性方面不是很强比如IE6、IE7、IE8等。
image.png
再来几个不同的款式：点击可查看源码
image.png image.png image.png image.png image.png

二、spin.js

这是一个脚本文件。不依赖任何库，可以独立执行，挺好用的，我在实际项目中使用过这个插件，当时我把所有的ajax提交都调用了这个插件，结合jQuery库，做到Loading效果和防止二次提交。而且这个库的浏览器兼容性很好，甚至兼容古老的IE6，而且不用引入额外的CSS或图，可配置的参数也很多。
我粗略的看过代码，标准的浏览器就用脚本写CSS3来做动画，对于古老点的浏览器就用setTimeout来模拟动画。里面还会初始化一个VML标签，这个是针对IE的。
看代码的时候看到了个很有趣的符号“~~”，后面一查，说是将变量转换成数字的一个方法，挺高级的。
这个插件还提供了一个在线配置的小网站，点击查看：
image.png
showAjaxLoading: function(btn) { if (btn == null || btn == undefined || $(btn).length == 0) return; var left = $(btn).offset().left; var top = $(btn).offset().top; var width = $(btn).outerWidth(); var height = $(btn).height(); var opts = { lines: 9, // The number of lines to draw length: 0, // The length of each line width: 10, // The line thickness radius: 15, // The radius of the inner circle corners: 1, // Corner roundness (0..1) rotate: 0, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise color: ‘#000’, // #rgb or #rrggbb or array of colors speed: 1, // Rounds per second trail: 81, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: ‘spinner’, // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: ‘50%’, // Top position relative to parent left: ‘50%’ // Left position relative to parent }; $(‘#ajax_spin’).remove(); $(‘body’).append(‘

‘); $(‘#ajax_spin’).css({ ‘top’: top, ‘left’: left, ‘width’: width, ‘height’: height }); var target = document.getElementById(‘ajax_spin_inner’); var spinner = new Spinner(opts).spin(target); //return spinner; }, stopAjaxLoading: function() { $(‘#ajax_spin’).remove(); //new Spinner(opts).spin(target) //spinner.stop(); }

上面那段代码是我在一个实际项目中写的，就是显示和移除Loading效果，并且在按钮上面覆盖这层效果防止二次提交。

  1. btn就是按钮jQuery对象
  2. left，top找到按钮的左右位移，width和height获取按钮的宽和高，width用的是outerWidth
  3. $(‘body’)加入一个能够覆盖按钮的层
  4. 初始化一个Spinner对象，并加入到那个覆盖层中

三、Ladda

可以单独使用，或者结合上面的插件spin一起结合使用。demo页面的效果挺高大上的，但用到实例可能还是需要些修改的。
点击查看主页
下图随便选了几个例子，可以实现不同尺寸的按钮大小，不同方向的滚动，将按钮变成原型，或带进度条的按钮。挺多样性的。
点击查看demo页面：
image.pngimage.pngimage.pngimage.png
HTML代码如下：

// Automatically trigger the loading animation on click Ladda.bind( ‘input[type=submit]’ ); // Same as the above but automatically stops after two seconds Ladda.bind( ‘input[type=submit]’, { timeout: 2000 } );
结构看上去不是很复杂，JS脚本的引入也不是很难。不过在引入实际项目中肯定还是需要做些修改的。
相比spin插件，这插件要引入的文件就多了，不但要引入JS还要引入CSS。
点击查看codepen上复制的代码
我本来想在codepen页面中，把demo页面重现一次，在把github里面的dist/CSS/ladda.min.css文件复制到codepen中，JS中的ladda.js和spin.js也复制过来。发生了点意外，那个滚动条老是会往下面一点。CSS都是全部复制的，很奇怪。后面发现是CSS的问题，真的是实际应用一下才会看到具体情况。
image.png
image.png
demo页面的CSS：
.ladda-button .ladda-spinner { position: absolute; z-index: 2; display: inline-block; width: 32px; height: 32px; top: 50%; margin-top: -17px; opacity: 0; pointer-events: none }
Github上的CSS：区别就是margin-top的不一样。
.ladda-button .ladda-spinner { position: absolute; z-index: 2; display: inline-block; width: 32px; height: 32px; top: 50%; margin-top: 0; opacity: 0; pointer-events: none }

四、Sonic.js

这个插件是创建一个canvas画布来实现Loaing动画效果。 款式也比较多，如下图所示：点击查看在线demo
image.png
在线demo中还展示了用CSS3动画+CSS Sprite技术实现动画
image.png