[本文出自天外归云的博客园]
最近在做一个JIRA信息统计的系统，在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端，时间较长，所以要添加一段等待时的loading画面，使用spin.js实现效果如下：
使用方法：
1. 在js函数中准备弹出loading效果的地方加上如下代码，弹出loading画面，以下为“调用代码”：
bootbox.dialog({ message:'<div style="text-align:center;height:150px;padding-top:65px;" id="spinMessage">关联JIRA信息统计中...</div>' + '<div id="saving"></div>', buttons:{ ok:{ label: '确定', className: 'hidden savingBtn' } } }); var spinner = new Spinner({radius: 30, length: 0, width: 10, color: '#286090', trail: 40}).spin(document.getElementById('saving'));
2. 在js函数中ajax返回结果后的地方加上如下代码，提示完成并关闭loading画面，以下为“关闭代码”：
spinner.spin(); $("#spinMessage").html('<font style="font-size:20px" color="green"><strong>统计完成!</strong></font>'); var savingBtn = document.getElementsByClassName('savingBtn')[0]; setTimeout(function(){ savingBtn.click(); }, 1000);
关于spin.js的用法详解，见官网。
另外：和Spring MVC+Freemarker结合的情况下，如果不用ajax的话，可以为相应的元素（例如：a标签）添加onclick事件，在onclick对应函数中添加“调用代码”。而href对应要跳转的页面。页面跳转请求会被后端controller处理，处理完成后返回相应的前端ftl页面，这时候页面会自动刷新，loading动画也将消失。
