欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

#Plugin 环形loading插件

程序员文章站 2022-03-25 13:55:51
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

案例展示

#Plugin 环形loading插件

下载地址

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>

上一篇： ai圆角矩形不能缩小怎么办? ai圆角矩形放大缩小的方法

下一篇： 百度网盘青春版怎么看导入记录 查看导入记录方法

推荐阅读