Loading动画--spinner+遮掩窗体

2019独角兽企业重金招聘Python工程师标准>>>

实现的效果：点击按钮之后触发遮掩窗体+loading动画，同时触发ajax请求，当请求成功时触发遮掩窗体+loading动画消失。ajax请求期间用户不能再对页面进行操作，点击空白处不会退出。 导入文件：jquery+bootstrap+spin.min.js

如下图：

html比较简单，主要是一个包含整个页面的div、一个触发按钮以及一个隐藏的遮掩窗体。 html:

    
点击触发遮掩窗体
	

		

			

				

			
		
	

js：

$(document).ready(function(){
			//初始化spinner
			var opts = {            
	            lines: 13, // 花瓣数目
	            length: 20, // 花瓣长度
	            width: 10, // 花瓣宽度
	            radius: 30, // 花瓣距中心半径
	            corners: 1, // 花瓣圆滑度 (0-1)
	            rotate: 0, // 花瓣旋转角度
	            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
	            color: '#5882FA', // 花瓣颜色
	            speed: 1, // 花瓣旋转速度
	            trail: 60, // 花瓣旋转时的拖影(百分比)
	            shadow: false, // 花瓣是否显示阴影
	            hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
	            className: 'spinner', // spinner css 样式名称
	            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
	            top: 'auto', // spinner 相对父容器Top定位 单位 px
	            left: 'auto'// spinner 相对父容器Left定位 单位 px
	        };
           var spinner = new Spinner(opts);
		   //点击按钮触发
		   $("#submitBtn").click(function(){
		   	  var target=$("#wrapper").get(0);
		      spinner.spin(target); 
			  $('#modal-container').modal({backdrop: 'static', keyboard: false});   
			  $.post("http://localhost:8080/ace_admin_template/purchase.do",function(){
					 spinner.spin();
					 $('#modal-container').modal('hide');
			   });	
		   });
		   
		   
			
});

关于加载中loading动画： 目前使用的是插件spin，用法如上。有兴趣的还可以尝试一下gif图片，在线生成loading的gif 地址:在线生成loading图片 毕竟图片 没有浏览器兼容的问题。

转载于:https://my.oschina.net/AnymoreCoder/blog/741163