CSS 製作各種 Ajax 載入動畫集錦

什麼是 Ajax 載入動畫呢？網頁跟後端請求資料，在等待的空檔，通常會先顯示 GIF 動畫，避免訪客等得不耐煩。這個過場動畫的英文名稱，就叫做 Ajax Loader。

由於 CSS 已經能處理細緻的動畫效果，那麼如果是簡單的過場動畫，就能用 CSS 來實現，不一定要讀取 GIF 檔，可以減少 HTTP 的請求。

本篇整理了多個實用的 CSS 載入動畫，只要直接複製語法就能套用。

一、來源網站

本篇提供的「CSS 載入動畫」安裝碼，來自以下三個網站：


1. Single Element CSS Spinners

• 網址：http://projects.lukehaas.me/css-loaders/

• 可自訂背景色及圖案的顏色
• 按每個圖案下方的「View Source」即可取得 CSS

2. LOADING.IO

• 網址：http://loading.io/

• 可自訂非常多細項，例如顏色、寬、高、速度...等
• 不一定每個圖案都有 CSS 版本，請注意畫面上若有「Get CSS」按鈕，按下後即可取得 CSS

3. CSSLOAD.NET

• 網址：http://cssload.net/

• 收集的圖案最多，分成 Spinners、Horizental bars...等五大項
• 可自訂顏色、速度、尺寸
• 按下「Get code」可取得 CSS

二、常用基本款

三、特殊效果