CircleLoader 環形loading插件 1.原生JS，不依賴jquery,zepto 2.前端學習交流群：814798690 案例展示 下載地址 https://github.com/chaorenzeng/CircleLoader/archive/master.zip 快速使用 1.引用 ...
CircleLoader
環形loading插件
1.原生JS，不依賴jquery,zepto
2.前端學習交流群：814798690
案例展示
下載地址
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>
