#Plugin 环形loading插件

最新推荐文章于 2021-08-06 20:57:28 发布

转载最新推荐文章于 2021-08-06 20:57:28 发布 · 40 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/KevinTseng/p/10320351.html

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>

转载于:https://www.cnblogs.com/KevinTseng/p/10320351.html