#Plugin 环形loading插件

CircleLoader

环形loading插件

1.原生JS,不依赖jquery,zepto

2.前端学习交流群:814798690

案例展示

#Plugin 环形loading插件

下载地址

https://github.com/chaorenzeng/CircleLoader/archive/master.zip

快速使用

1.引用 CircleLoader.js CircleLoader.css

2.参考以下HTML结构文档

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="js/CircleLoader/CircleLoader.css"/>
</head>
<body>
</body>
</html>
<script src="js/CircleLoader/CircleLoader.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var loader = new CircleLoader();
loader.show();
</script>

文档说明

参数
参数名 默认值 说明
left 48% 左边距离
top 40% 顶部距离
width 50px 环形宽度
height 50px 环形高度
lineWidth 12% 环点宽度
lineHeight 12% 环点高度
lineRadius 0% 环点半径
lineBgColor #337ab7 环点颜色
index 1 层叠位置
display false 是否显示
css_link null 插件样式路径

css_link参数默认为null时,页面需引入CircleLoader.css

若页面不引入CircleLoader.css时,可配置css_link参数获取样式

方法
方法名 说明
show 显示loading
hide 隐藏loading
代码示例(ajax请求前显示loading)
<script src="js/CircleLoader/CircleLoader.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var loader = new CircleLoader({
lineWidth: "20%",
lineHeight: "2%",
lineRadius: "10%",
css_link: "js/CircleLoader/CircleLoader.css"
});
loader.show();
var ajaxRequest = $.ajax({
type: 'POST',
timeout: 20000,
url: "http://xxxx/api/",
data: {},
success: function (data) {},
error: function (jqXHR, textStatus, errorThrow) {},
complete: function (XMLHttpRequest, status) {
loader.hide();
if (status == 'timeout') {
ajaxRequest.abort(); // 超时后中断请求
alert("网络超时,请刷新重试");
}
}
});
</script>
上一篇:[转载]AppSettings和ConnectionStrings的区别


下一篇:AppSettings和ConnectionStrings的区别