2016年4月22日

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

A+
css-ajax-loader-CSS 製作各種 Ajax 載入動畫集錦什麼是 Ajax 載入動畫呢?網頁跟後端請求資料,在等待的空檔,通常會先顯示 GIF 動畫,避免訪客等得不耐煩。這個過場動畫的英文名稱,就叫做 Ajax Loader。

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

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



一、來源網站


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


1. Single Element CSS Spinners


single-element-css-spinners-CSS 製作各種 Ajax 載入動畫集錦

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


2. LOADING.IO


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

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


3. CSSLOAD.NET


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

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



二、常用基本款




Loading...


Loading...







L
o
a
d
i
n
g








三、特殊效果














loading

















更多 CSS 相關技巧:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。