動畫圖示

網頁加載時，如果可以給予提示，告訴訪客網站確實有按要求正在動作，相信訪客會比較願意等候，因此，在很多的網站中，會看到利用百分比的進度條、loading 的動畫圖示來顯示，直到加載完成，以 loading 的動畫圖示來說，可以使用 GIF 動畫圖檔來製作，不過前提是須要有 GIF loading 圖檔，另外一種則是利用 CSS 來製作，Tobiasahlin 這個旗下的 SpinKit 網站，提供了以 CSS 為主的 loading 動畫圖示，並提供 HTML 與 CSS 的語法讓有需要的用戶快速套用。

如果網頁要使用一些動畫圖示，例如滑鼠移動按鈕上方，按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示，這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現，而現在你也可以單純利用 CSS 語法就可辦到，CSS WAND 提供 Hover、Loading 類型的 CSS 動畫，只要複製該範例的 CSS 語法，就可以將範例應用到自己的網頁，相當方便。

Hypah 是一個可將自己上傳的相片，搭配 Hypah 所提供的 GIF 動畫圖示，用來裝飾或點綴相片，並加以合成存成 GIF 動畫圖檔，讓原本靜態的相片看起來也有動態的效果，製作完成後，除了可下載到自己電腦裡保存，也會得到該相片的一個網址，可運用在網頁上，或分享到 Facebook 上。

網頁在呈現之前是需要運算及傳輸時間的，如果可以在這個等待時間加入一個進度條，讓瀏覽者知道還要等多久，會是較理想的網頁設計，但進度條的準確度會受到很多條件的限制，因此，大部分的網頁都是提供一個等待圖示動畫，藉此提示瀏覽者，不需要有多餘的動作靜待網頁呈現。以往要加入此類的等待圖示動畫，我們會使用 Gif 圖檔，而現在我們可以更方便的使用 JavaScript 或是純 CSS 就能加入，Loaders 這個網站提供獨特且具有質感的 24個免費 loader ICON，每個均提供 REACT、HTML 及 CSS 原始碼，讓網頁設計使用 loader ICON可以更方便且有更多選擇。

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

製作網頁如果預期會有較長時間的等待，通常會在等待的時間加入一個 loading 的動畫圖示來告知，避免用戶誤以為網頁沒有反應而離開，想要加入一個等待載入的動態圖示，可以來試試 loading.io 網站所提供可自訂圖示動態速度與顏色的動畫圖示產生器，不但可產生 GIF 檔外，還可產生出 CSS 或 SVG 檔，還提供範例語法，讓你輕易地運用到網頁裡。

瀏覽網頁之所以會覺得網站可能沒有回應，原因有可能出在網頁需要運算時間較久、網路傳輸速率較慢或的數據過多...等等，總之，在這之前如果適時地放上一個等待圖示或是加載中，請稍後...的字樣，都比讓用戶空等帶來的好，如果是要放等待動畫圖示，GIF 是個選擇，而另一選擇則是使用 CSS，Uiball.com 這個網站提供 24個以 CSS 打造的等動畫圖示，喜患的就可以直接複製其 html 與 css語法，直接放到想要顯示的位置即可。

網頁上放置動畫圖示，一來可以吸引訪客的目光，二來也讓訪客感受到網站擁有者的用心，總之，肯定能為網站起到加分的作用，但是，要製作這些動畫，對很多人來說是個門檻，要跨過也不容易，useAnimations 這個網站提供為數不多的 SVG 動畫圖示，其分為持續動作、點擊後動作的，還有滑鼠在圖標上方才動作等三大類型，每個都可在其網站看到預覽並實際操作，且免去註冊、跳來跳去的導引點擊廣告，喜歡就下載，完全不囉嗦。