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

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

• 網站語言：英文
• 網站網址：按我前往 24 PURE CSS3 PRELOADERS

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


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

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




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