loading...正在加载中的动画效果
Clone or download
Latest commit b4cc9a3 Jul 24, 2017
Permalink
Failed to load latest commit information.
example 加载loading动画的实现 Aug 6, 2015
src edit Jul 24, 2017
README.md 'update' Jul 18, 2017
gulpfile.js 加载loading动画的实现 Aug 6, 2015
http.js 加载loading动画的实现 Aug 6, 2015

README.md

loading

loading... 效果图如下: loading

DEMO请点击这里查看.

https://github.com/tianxiangbing/network有对loading作一个完美的演示

调用示例

html:

<p>
	<input type="button" id="loading1" value="loading我自己">
	<input type="button" id="loading2" value="loading下面这个div">
	<input type="button" id="loading3" value="loading全屏">
</p>
<div id="loading-content" style="width:300px;height:200px;border:1px solid #ccc;background-color:#f2f2f2;">这是个内容的例子</div>
<script src="../src/jquery-1.11.2.js"></script>
<script src="../src/loading.js"></script>

js:

//loading我自己
$('#loading1').click(function(){
	var load = new Loading();
	load.init({
		target: this
	});
	load.start();
	setTimeout(function() {
		load.stop();
	}, 3000)
});
//loading下面这个div
$('#loading2').click(function(){
	var load = new Loading();
	load.init({
		target: "#loading-content"
	});
	load.start();
	setTimeout(function() {
		load.stop();
	}, 3000)
});
//loading全屏
$('#loading3').click(function(){
	var load = new Loading();
	load.init();
	load.start();
	setTimeout(function() {
		load.stop();
	}, 30000)
});

API

属性

target:string||dom

需要显示loading的节点,不传值时显示全屏的loading

方法

start:function()

开始loading

stop:function()

结束loading,这里会销毁loading节点

事件

stop

target的stop事件触发时,结束loading. 如
$('html').trigger('stop')会结束全屏的loading动画.