正在加载中...，这个需求还是很常见的，不管是app还是h5都需要，否则网络不顺畅的情况下，用户都不知道到底提交了没有，会出现多次点击的情况，spin.js是一个开源的第三方进度展示js组件，官网地址：spin.js,github开源地址：GitHub - fgnass/spin.js: A spinning activity indicator，目前将近10000颗星星，可以自定义样式，还是挺受欢迎的。在他们的官网还可以设置样式，实时看效果，之前我从他们的官网引入js:http://spin.js.org/spin.js,发现页面上一直无法展示正在加载中的进度条。发现无法new Spiner()对象。不知道为什么，后面网上下载了一份spin.min.js后，可以了，我把spin.min.js放百度网盘供大家下载。 百度网盘 请输入提取码 提取码：kbma。好，下面给出测试页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>spin.js测试</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!--原版压缩spin.js-->
<script type="text/javascript" src="./static/js/spin.min.js"></script>
<script type="text/javascript" src="./static/js/jquery2.1.1.min.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<style rel="stylesheet" type="text/css">
#mask {
display: none;
height: 100%;
width: 100%;
position: fixed;
*position: absolute;
*height: 1380px;
background: black;
top: 0;
left: 0;
opacity: 0.6;
}
</style>
<script type="text/javascript">
//opts 可从网站在线制作 http://spin.js.org/
var opts = {
//innerImage: {url: '../img/logo.png', width: 56, height: 56 }, //内部图片
lines : 13, // 花瓣数目
length : 20, // 花瓣长度
width : 10, // 花瓣宽度
radius : 30, // 花瓣距中心半径
corners : 1, // 花瓣圆滑度 (0-1)
rotate : 0, // 花瓣旋转角度
direction : 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
color : '#FFF', // 花瓣颜色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
position : 'relative', // element position
progress : true, // show progress tracker
progressTop : 0, // offset top for progress tracker
progressLeft : 0 // offset left for progress tracker
};
var spinner = new Spinner(opts);
$(document).ready(function() {
$("#btnRequest").bind("click", function() {
ajaxRequestData();
})
})
function ajaxRequestData() {
$.ajax({
type : "POST",
timeout : 10000,
dataType : "text",
url : "你的后台接口请求地址",
beforeSend : function() {
//异步请求时spinner出现
$("#firstDiv").text("");
var target = $("#firstDiv").get(0);
spinner.spin(target);
//添加蒙板，避免多次点击提交按钮
$("#mask").css("display", "block");
//进度
//spinner.setProgress(i, 20);
},
success : function(msg) {
$("#firstDiv").text(msg);
//关闭spinner
spinner.spin();
//关闭蒙板
$("#mask").css("display", "none");
},
error : function(e, jqxhr, settings, exception) {
$("#firstDiv").text("请求发生错误...");
//关闭spinner
spinner.spin();
//关闭蒙板
$("#mask").css("display", "none");
}
})
}
</script>
</head>
<body>
<div></div>
<div id="firstDiv"></div>
<div id="secondDiv">
<input id="btnRequest" type="button" value="请求数据" />
</div>
<div id="mask"></div>
</body>
</html>效果如下：