标签：let ast header tle err ble css_ type jquer
1.原生JS，不依赖jquery,zepto
2.前端学习交流群：739574382
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 |
<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>标签：let ast header tle err ble css_ type jquer
原文地址：https://www.cnblogs.com/KevinTseng/p/10320351.html
