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>

#Plugin 环形loading插件的更多相关文章

  1. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  2. loading插件（原创）

    前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chenggu ...

  3. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  4. 【自己开发】Jquery的loading插件

    经过几周的时间的开发.我的loading插件终于上线了.这个插件功能为客户提供正在等待的信息,提供优良用户体验效果. 先看效果. 原理我内部实现我不讲,特别简单. 我说调用方式和api. 首先引用jq ...

  5. JQuery+Bootstrap 自定义全屏Loading插件

    /** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param ...

  6. 【大话QT之十二】基于CTK Plugin Framework的插件版本号动态升级

    应用需求: 某些场景下我们可能面临这种问题,在执行着的应用程序不能终止的情况下,升级某个功能(或添,或减.或改动).在不採用CTK Plugin Framework插件系统架构的情况下这将是非常困难的 ...

  7. Maya Plugin 编译Maya插件

    Maya自身的功能就已经非常强大了,但是更棒的是它的扩展性非常强,提供API让用户自己来编写插件Plugin.Maya的插件主要是两种,一种是用C++编写的,后缀为".mll",另 ...

  8. idea 安装mybatis plugin （mybatis插件）

    注意:可以用免费版本的,就是下面没有 被红框圈中的 Free Mybatis Plugin 安装上以后需要破解,先找到下面的文件 打开文件,设置其中的key 和 value : 这里面的key 和 v ...

  9. 自定义vue的loading插件

    在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件. 一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中, ...

随机推荐

  1. angular学习总结

    因为学习需要,要配置一系列环境,中间又出了很多各种各样的花式错误,因此当做个人总结记录一下.一.vs1. 完全卸载VS2013找到vs2013的安装包,如图 打开cmd命令行窗口,cd到安装包下的vs ...

  2. 阿里云ECS提示RHSA-2017:3263: curl security update

    服务器配置: 原因阿里云安装的CentOS 7.3的curl和libcurl的源不是最新的,会导致安全漏洞出现 方法首先还是要在实例列表远程连接打开终端. 1.更新ca-bundle1.备份: cp ...

  3. 【bzoj3160】 万径人踪灭

    http://www.lydsy.com/JudgeOnline/problem.php?id=3160 (题目链接) 题意 给定一个由'a'和'b'构成的字符串,求不连续回文子序列的个数. Solu ...

  4. BZOJ 4720 [Noip2016]换教室

    4720: [Noip2016]换教室 Description 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节课程安排在n个时间段上.在第i( ...

  5. Codechef Sad Pairs——圆方树+虚树+树上差分

    SADPAIRS 删点不连通,点双,圆方树 非割点:没有影响 割点:子树DP一下 有不同颜色,所以建立虚树 在圆方树上dfs时候 如果当前点是割点 1.统计当前颜色虚树上的不连通点对,树形DP即可 2 ...

  6. 洛谷P2605 基站选址

    神TM毒瘤线段树优化DP......新姿势get. 题意:有n个村庄,在里面选不多于k个建立基站. 建立基站要ci的费用.如果一个村庄方圆si内没有基站,那么又要支出wi的费用.求最小费用. 解:很显 ...

  7. 【BZOJ 3451】Tyvj1953 Normal 思维题+期望概率+FFT+点分治

    我感觉是很强的一道题……即使我在刷专题,即使我知道这题是fft+点分治,我仍然做不出来……可能是知道是fft+点分治限制了我的思路???(别做梦了,再怎样也想不出来的……)我做这道题的话,一看就想单独 ...

  8. E. The Supersonic Rocket Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)

    http://codeforces.com/contest/1017/problem/E 凸包模板+kmp #include <cstdio> #include <cstdlib&g ...

  9. P2073 送花

    P2073 送花 题目背景 小明准备给小红送一束花,以表达他对小红的爱意.他在花店看中了一些花,准备用它们包成花束. 题目描述 这些花都很漂亮,每朵花有一个美丽值W,价格为C. 小明一开始有一个空的花 ...

  10. python操作txt文件中数据教程[4]-python去掉txt文件行尾换行

    python操作txt文件中数据教程[4]-python去掉txt文件行尾换行 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文章 python操作txt文件中数据教程[1]-使用pyt ...