24個純 CSS 打造的等待動畫圖示 隨取即用

24個純 CSS 打造的等待動畫圖示 隨取即用

網頁處理、運算、傳輸都需要時間,如果讓使用者乾等待,就容易產生當機的錯覺,因此,在這段時間產生一個提示訊息藉此告訴使用者耐心等待是有必要的,而現行網頁最常見的就是使用等待動畫圖示,負責處理到呈現這段時間的呈現,這個動畫可以使用 GIF 圖檔,也可以使用純 CSS 語法打造,24 PURE CSS3 PRELOADERS 這個網站展示了 24個純 CSS 等待動畫圖示,只需在網頁中引用該 CSS 檔案,就可輕易實現等待中使用動畫圖示來提示。

§相關文章,還可以參閱:

如何使用 24 PURE CSS3 PRELOADERS 所提供的等待動畫圖示?

1.使用瀏覽器進入 24 PURE CSS3 PRELOADERS 的等待動畫圖示展示網頁。

24個純 CSS 打造的等待動畫圖示 隨取即用

2.接下來轉到 GitHub - MarinaOsadcha/Preloaders 網站下載範例與 CSS 檔案。

24個純 CSS 打造的等待動畫圖示 隨取即用

3.解壓縮下載的檔案後,在欲使用等待動畫圖示的網頁 head 區域中引用該 CSS 檔案。

24個純 CSS 打造的等待動畫圖示 隨取即用

4.找到欲使用的動畫圖示,將其複製到 HTML Body 區快要顯示的位置,後續便可利用 JavaScript 來控制需要呈現的時機。

24個純 CSS 打造的等待動畫圖示 隨取即用