#Plugin 环形loading插件

CircleLoader

环形loading插件

1.原生JS，不依赖jquery,zepto

2.前端学习交流群：814798690

案例展示

#Plugin 环形loading插件-LMLPHP

下载地址

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	插件样式路径

方法

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>