码迷,mamicode.com
首页 > 其他好文 > 详细

#Plugin 环形loading插件

时间:2019-01-25 17:41:42      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:let   ast   header   tle   err   ble   css_   type   jquer   

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插件

标签:let   ast   header   tle   err   ble   css_   type   jquer   

原文地址:https://www.cnblogs.com/KevinTseng/p/10320351.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!