Loading动画--spinner+遮掩窗体

最新推荐文章于 2024-12-22 09:24:39 发布

weixin_34302561

最新推荐文章于 2024-12-22 09:24:39 发布

阅读量499

点赞数

CC 4.0 BY-SA版权

文章标签： c# 移动开发 python

原文链接：https://my.oschina.net/AnymoreCoder/blog/741163

本文介绍如何使用jQuery和spin.min.js插件实现在页面上点击按钮后触发遮罩层与加载动画，并在此期间禁用页面交互，直到AJAX请求完成。文中详细展示了HTML结构与JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

如下图：

效果图

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

<div id="wrapper" style="position:absolute; left:0; top:0px;height:100%;width:100%">
    <div><button id="submitBtn" type="button">点击触发遮掩窗体</button></div>
	<div class="col-md-12 column">
		<div class="modal fade" id="modal-container" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" keyboard="false">
			<div class="modal-dialog">
				<div class="modal-content"></div>
			</div>
		</div>
	</div>
</div>

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