首頁線上工具開發工具

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

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

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

🔔 不錯過任何精彩！ 立即訂閱我們的 LINE 官方帳號

每次發佈新文章時，您將會第一時間收到本站文章連結通知，輕鬆掌握最新資訊！

使用 LINE 追蹤文章更新

§相關文章，還可以參閱：

如何使用 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 打造的等待動畫圖示 隨取即用