有的时候，我们在请求后台执行任务的时候。需要用户等待后台处理，如果没提示的时候，会给用户体验很差的感觉，几年介绍一个jquery的一个插件。
官网：http://spin.js.org
完整的例子：
html:
1 <!--loading--> 2 <div id='foo'></div> 3 <div id='xx'></div>
js:通过click事件，经过ajax请求，请求到后台。在这段时间内显示我们请求中的样式：
1 <script src="/static/trouble_run/js/spin.min.js"></script> 2 function troub_stop(){ 3 var task_id='{{task_id}}'; 4 var opts = { 5 lines: 9, // The number of lines to draw 6 length: 0, // The length of each line 7 20, // The line thickness 8 radius: 25, // The radius of the inner circle 9 corners: 1, // Corner roundness (0..1) 10 rotate: 0, // The rotation offset 11 color: '#FF4500', // #rgb or #rrggbb 12 speed: 1, // Rounds per second 13 trail: 60, // Afterglow percentage 14 shadow: false, // Whether to render a shadow 15 hwaccel: false, // Whether to use hardware acceleration 16 className: 'spinner', // The CSS class to assign to the spinner 17 zIndex: 2e9, // The z-index (defaults to 2000000000) 18 top: '25%', // Top position relative to parent in px 19 left: '50%' // Left position relative to parent in px 20 }; 21 $("#xx").css("display","block"); 22 var target = document.getElementById('foo'); 23 var spinner = new Spinner(opts).spin(target); 24 $.ajax( 25 { 26 url:'/close_trouble/', 27 type:'POST', 28 dataType:'json', 29 data:{'task_id':task_id}, 30 success:function(callback){ 31 console.log(callback) 32 if (callback['status']){ 33 void 0 34 }else{ 35 $("#xx").css("display","none"); 36 spinner.spin(); 37 $('#myModal').modal('show'); 38 $('.modal-body label').text(callback['msg']) 39 } 40 } 41 } 42 43 ) 44 45 46 47 }
效果：
其中我们通过：
1 var opts = { 2 lines: 9, // The number of lines to draw 3 length: 0, // The length of each line 4 20, // The line thickness 5 radius: 25, // The radius of the inner circle 6 corners: 1, // Corner roundness (0..1) 7 rotate: 0, // The rotation offset 8 color: '#FF4500', // #rgb or #rrggbb 9 speed: 1, // Rounds per second 10 trail: 60, // Afterglow percentage 11 shadow: false, // Whether to render a shadow 12 hwaccel: false, // Whether to use hardware acceleration 13 className: 'spinner', // The CSS class to assign to the spinner 14 zIndex: 2e9, // The z-index (defaults to 2000000000) 15 top: '25%', // Top position relative to parent in px 16 left: '50%' // Left position relative to parent in px 17 };
来定义 我们显示的加载图样的样式。
其中我们定义了遮罩层：
1 #xx{ 2 display: none; 3 height: 100%; 4 100%; 5 position: fixed; 6 *position: absolute; 7 *height: 1380px; 8 background: black; 9 top:0; 10 left: 0; 11 opacity:0.4; 12 }
然后通过：
1 $("#xx").css("display","block"); 2 var target = document.getElementById('foo'); 3 var spinner = new Spinner(opts).spin(target);
显示遮罩层和加载中图样。当后端请求到数据之后，我们去掉遮罩层和加载样式：
1 $("#xx").css("display","none"); 2 spinner.spin();
这样就可以自定义我们的加载样式。很简单！