Loading 效果

Loading Effects

圖片來源：https://codepen.io/nxworld/pen/zwGpXr

關於 Loading… 這件事

你是否看膩了千篇一律的 ⌛ Loading?

在這個網路時代，應該沒有人對於上圖感到陌生吧！不管是瀏覽網頁或觀看影片，相信沒有人會期待看到它，但在 5G 普及以前，Loading 還是難免會出現在使用者的生活之中~或許我們可以嘗試做一些改變，讓 Loading 這件惱人的事，變得更加可愛一點。

下方蒐集了一些作品，我們可以參考看看這些設計如何賦予 Loading 生命，或許能夠成為你我下次創作的靈感。

Loading Spinners

# CSS Spinners 集合
單純運用 CSS Animation 也能讓小小的 Loading Spinner 擁有豐富的變化。

[A-202008–1–1]

[A-202008–1–2]

# 別具一格
加上這些巧思，我願意等2秒鐘。

[A-202008–1–3]

[A-202008–1–4]

[A-202008–1–5]

[A-202008–1–6] 乍看以為是星際大戰的光劍

[A-202008–1–7] 應該很適合 Pizza 或派狀食物

Loading Text

除了使用 Loading Spinner 圖示之外， Loading 文字特效也可以創造出很多不錯的效果。

# 文字特效集合

[A-202008–1–8]

＃3D（CSS旋轉）

[A-202008–1–9]

# 讓人會心一笑的小動態

[A-202008–1–10]

# 故障效果

[A-202008–1–11]

# 水波效果

[A-202008–1–12]

# 樂高效果

[A-202008–1–13]

關於 Loading … 教會我的事

對大多數使用者而言，網頁載入 3~5 秒已經差不多是極限了，即便在加載大量數據時可以運用進度條( ■■■■■■□□□ 70%)讓使用者清楚 Loading 的進度，但永遠不要考驗使用者微米般的耐性。Loading 頁面僅是其中的加分項，提升網頁速度及擁有良好的 UI/UX 還是最終的關鍵。

根據統計數據指出，有 68% 的使用者表示，當網站超過 3 秒後，他們會選擇離開。(Whoops SEO)

範例來源

CodePen