最簡單的前端動畫加載器

EasyLoading

項目地址猛戳這裏 。
在前端交互中，加載動畫必不可少，爲了實現這類動畫加載器，往往需要添加額外的標籤，通過CSS構建動畫，EasyLoading可以幫你從這些繁瑣的工作中解放出來。
通過這個項目，你只需要一行代碼就可以實現全局的加載動畫呈現，還可以自定義文本提示和取消按鈕，或配置一個超時回調處理業務。
如果需要在特定的標籤或者浮動窗口中顯示加載動畫，你可以構建一個jQuery的標籤對象並傳遞給EasyLoading。
CSS動畫從懶人之家的項目拷貝而來，詳情請查看 http://www.lanrenzhijia.com.

預覽

爲了更好展現EasyLoading的功能，我準備了兩個例子：
點擊查看基本功能 ，你只需要導入一個css和js文件，就可以在需要的地方通過一句代碼呼出加載動畫。
點擊查看高級功能 ，如果希望在指定的標籤下顯示加載動畫，通過回調消息通知業務超時等，這個例子可供你做參考。
遺憾的是，EasyLoading當前只支持單例模式，這也就意味着你只能同時顯示一個加載動畫:-)。沒關係，如果你持續關注該項目並不吝嗇star一顆小星星，我保證一定會解決這個問題(:-D。

版本

version	date	detail
0.1.0	2017.11.17	基礎功能實現
0.2.0	2017.12.1	添加窗口resize監聽器，支持容器模式

依賴

name	min-version	detail
jQuery	1.6	DOM 腳本操作庫

使用

導入第三方庫(jQuery)。

<script src="js/jquery-1.11.3.min.js"></script>

導入 CSS 和 JavaScript 文件。

<link rel="stylesheet" href="css/easy-loading.min.css">
<script src="js/easy-loading.min.js"></script>

附帶參數調用方法，顯示加載動畫。

EasyLoading.show({
    text: $("<span>loading image</span>"),
    button:$("<span>dismiss</span>"),
    type: EasyLoading.TYPE.PACMAN
});

在上述方法中我們配置了一個按鈕，通過這個按鈕可以隱藏及結束加載動畫，當然你也可以手動調用這個方法。

EasyLoading.hide();

在大於等於 v0.2.0 的版本中,可以在標籤中添加該加載器，在高級功能 例程中我把它添加到一個jQueryUI的浮動對話框裏。
需要注意的是，爲了填充整個容器，EasyLoading的寬高配置爲100%，所以用於顯示加載器的容器寬高必須已確定，否則很有可能看不到加載器動畫|:-<。
在下面的例子中，我們把EasyLoading顯示在一個id=container的標籤容器裏，只需要通過$(‘#container)實例化一個jQuery對象並作爲第二個參數傳入show()方法。

EasyLoading.show({
    text: $("<span>container is loading</span>"),
    button:$("<span>dismiss</span>")
}, $('#container');

上面已提到，目前Easy loading工作在單例模式，所以當你需要在一個全局顯示的加載器和一個標籤容器內加載器間來回切換的時候，需要手動調用”destroy()”銷燬方法。

EasyLoading.destroy();

銷燬一個加載器後調用”show()”方法，將會重新構建一些必要的DOM標籤，會耗費些許額外的時間。
如果你只是在相同的位置顯示和隱藏該動畫加載器，只需要使用”hide()”和”show()”方法即可。

參數

EasyLoading.show(params) 方法支持以下可選參數。

參數	功能	缺省值
type	動畫類型	TYPE.BALL_PULSE
timeout	加載器超時，單位毫秒	null
callback	回調方法	null
text	加載器顯示的文本內容	“”
button	加載器現實的取消按鈕	null
background_color	背景顏色	“black”
dismiss	點擊空白位置取消加載	false

1.type

支持下列枚舉參數，具體動畫效果可以去基本功能例子體驗。

TYPE = {
    BALL_PULSE, BALL_CLIP_ROTATE, BALL_CLIP_ROTATE_PULSE, SQURE_SPIN, BALL_CLIP_ROTATE_MULTIPLE, 
    BALL_PULSE_RISE, BALL_ROTATE, CUBE_TRANSITION, BALL_ZIP_ZAG, BALL_ZIP_ZAG_DEFLECT, BALL_TRIANGLE_PATH, 
    BALL_SCALE, LINE_SCALE, LINE_SCALE_PARTY, BALL_SCALE_MULTIPLE, BALL_PULSE_SYNC, BALL_BEAT, 
    LINE_SCALE_PULSE_OUT, LINE_SCALE_PULSE_OUT_RAPID, BALL_SCALE_RIPPLE, BALL_SCALE_RIPPLE_MULTIPLE,
    BALL_SPIN_FADE_LOADER, LINK_SPIN_FADE_LOADER, TRIANGLE_SKEW_SPIN, PACMAN, SEMI_CIRCLE_SPIN
};

2.timeout

加載器毫秒級別超時時間，到達這個時間後加載器就會自動隱藏。如果你配置了callback，會回調”on_loaded”消息，可以在這裏給用戶一些超時提示或做些額外的邏輯處理。

3.callback

回調函數，在EasyLoading隱藏、超時、取消按鈕按下等操作的時候會調用。

EasyLoading.show({
    callback: function(event, data){
        // TODO
    }
});

event	data	info
‘on_btn_click’	Event	DOM click event for button click
‘on_loader_click’	Event	DOM click event for loader empty body click
‘on_loaded’	Options	The options from “EasyLoading.show(options)”

4.text

加載器顯示的文本提醒，可以直接輸入字符串，也可以輸入jQuery格式的自定義的HTML標籤，如：

EasyLoading.show({
    text: $("<span>loading image</span>")
});

5.button

加載器的取消按鈕，直接輸入字符串配置該按鈕的文字提醒，如果你嫌棄缺省的按鈕樣式（一般人都喜歡自定義吧(:-D），傳入一個jQuery格式的標籤也是可以的，如：

EasyLoading.show({
    button:$("<button class='jq_float_btn' style='margin-top: 10px'>dismiss</button>")
});

6.background_color

默認背景是半透明黑色，你可以修改CSS文件，或者直接從這裏傳入顏色標籤，當然可以是RGB格式的顏色配置，如：

EasyLoading.show({
    background_color: "#112233"
});

7.dismiss

點擊加載器的空白處隱藏加載器，這樣你不需要配置取消按鈕可以了取消加載器（不會誤觸嗎）。

方法

function	param	return	info
show(param)	refer to Parameters above	void	顯示加載器
show(param, container)	refer to Parameters above, jQuery container for showing loader	void	在容器內顯示加載器
hide()	null	void	隱藏加載器
isRunning()	null	bool	加載器是否在運行
destroy()	null	void	銷燬加載器