【筆記】使用CSS製作網頁載入動畫效果(CSS for loading)

有時為了讓使用者有更好的使用經驗，在網頁載入時，需要顯示些什麼，讓使用者知道現在在載入中，今天同事介紹了一個網站cssload.net，讓人輸入一些簡單的設定後，就可以不用gif等圖檔，只使用CSS做出網頁載入時，等待的效果，像這樣：

進入該網站後，就會有幾個簡單的設定：

第一步在「Select your loader」 選擇好我們要的載入時顯示的圖形樣版：

再來選擇好要的顏色、大小，和動畫的速度後，點按【GET CODE】，就會跳出一個小視窗，顯示相對應的html和CSS：

上列的程式碼中包含了<style>和<div>兩個部份，分別把需要的style和html複製後放在適當的地方，就可以顯示出所需要的效果。