iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
2
Modern Web

前端UI軍火庫系列 第 6

[Day 06]loader.css - 就算loading中,也要很美觀才行

隨著網頁技術越來越普及,ajax越來越被廣泛使用,為了讓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跟著調整就可以了。

以下是簡單的DEMO

http://ithelp.ithome.com.tw/upload/images/20161206/20020617TImM2nvkAR.png

JSFiddle: https://jsfiddle.net/wellwind/m7h2Lme7/

類似資源

  • CSSPIN - CSSPIN是一個著重在"旋轉"這種效果的loading library,雖然效果數量比較少,但色彩變化比較豐富。
  • SpinKit - SpinKit也是一個把效果放在"旋轉"這件事情上的library,但能呈現的特效數量更多。
  • Ladda - 表單按鈕按下後,一般除了把按鈕disabled來讓他無法重複發送以外,透過ladda也能讓表單送出時鎖定的按鈕具有更豐富的變化,非常適合用在ajax表單上。
  • CSS Loader - CSS Loader在呈現loading時會同是進行block ui的動做,防止畫面上的任何變動,同時他的呈現方式也很有創意!

以上是一些我自己覺得不錯而蒐集的library,實際上網路也更多的loading library,就讓大家自己上網尋寶囉!

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/06/front-end-loader-css

不正經閒聊

一直轉啊轉的,頭都暈了啦><


上一篇
[Day 05]WOW.js - 動畫很炫,也要看得到才行啊!
下一篇
[Day 07]CKEditor - 最好用的Web版文字編輯器
系列文
前端UI軍火庫31

尚未有邦友留言

立即登入留言