當網站內容在讀取及載入程序速度較慢會延遲客戶閱讀網站內容，同時可能造成客戶離開網頁，在網站讀取時增加 loading 動畫是有需要的，例如：AJAX的程序越大執行程序時會讓用戶以為網站沒有反應。
加上一個loading的icon是很常見的做法，早期甚至還可以看到不少loading圖片的產生器；但CSS功能越來越強，使用圖片的必要性也就變少了，今天要介紹的loader.css就是一款利用CSS產生loading圖示的library。
關於loader.css
loader.css預先定義了超過30種的loading顯示方式，我們只需要套用對應的class，就能夠輕易的產生一個loading的動畫圖示。
使用loader.css
在文件中載入相關的css/js之後，只需要加入以下HTML
<div class="loader-inner ball-pulse"></div> 加入的loader-inner這個class本身其實沒有意義，是要給稍後的JavaScript使用的ball-pulse則是其中的一種動畫效果，更多的效果可以在官方DEMO上看到，在demo上你可以看到每個圖示中的白色小點都是一個div標籤，因此以ball-pulse這個效果來說的話，在外層的div裡面還需要塞入三個div才行，如果是ball-spin-fade-loader就要塞入8個！其實不是很方便。
使用loaders.js
好在loader.css還提供了一個helper library – loaders.js，透過這個library可以幫助我們塞入所需數量的div標籤，這個library是一個jQuery plugin，因此要使用前還需要先載入jQuery才行。載入後我們可以加入以下JavaScript程式碼
$('.loader-inner').loaders(); 這裡就是抓出我們之前的loader-inner然後啟用loaders()，然後就能根據我們加入的class來決定要塞入多少個div，因此這個loader-inner你要改成loader-ironman也完全沒問題，只要JavaScript跟著調整就可以了。
JSFiddle: https://jsfiddle.net/wellwind/m7h2Lme7/
- CSSPIN – CSSPIN是一個著重在”旋轉”這種效果的loading library，雖然效果數量比較少，但色彩變化比較豐富。
- SpinKit – SpinKit也是一個把效果放在”旋轉”這件事情上的library，但能呈現的特效數量更多。
- Ladda – 表單按鈕按下後，一般除了把按鈕disabled來讓他無法重複發送以外，透過ladda也能讓表單送出時鎖定的按鈕具有更豐富的變化，非常適合用在ajax表單上。
- CSS Loader – CSS Loader在呈現loading時會同是進行block ui的動做，防止畫面上的任何變動，同時他的呈現方式也很有創意！