#Plugin 环形loading插件
Posted kevintseng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#Plugin 环形loading插件相关的知识，希望对你有一定的参考价值。
CircleLoader
环形loading插件
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 |
代码示例(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>以上是关于#Plugin 环形loading插件的主要内容，如果未能解决你的问题，请参考以下文章
markdown 链接，片段，提醒，收集点作为重新访问WordPress插件开发期间的笔记#WordPress #Plugin #PHP #Refere
mysql8.0 Authentication plugin 'caching_sha2_password' cannot be loaded