載入動畫(Loading Spinner)顧名思義就是用在網頁未載入完成前顯示給瀏覽者看的動畫效果。因為現在的網站都越做越酷炫，當然所要載入的元素跟資源也跟著變大，因此在未全部載入完之前，可以先顯示個載入動畫來讓瀏覽者了解頁面還在載入中。
筆者今天會利用 border-radius 圓角效果來產生一個圓形區塊，接著再搭配旋轉效果來做個動畫效果。一開始先準備個 div 區塊就可以了：
1 2 3 | <body> <div class="loading"></div> </body> |
先將 div 區塊加上邊框並利用 border-radius 來變成圓形：
1 2 3 4 5 6 7 8 9 | body { background-color: #eee; } .loading { border: 3px solid #3a3; height: 50px; width: 50px; border-radius: 50%; } |
如果不知道 border-radius 的用法的話，可以先參考 border-radius 圓角效果。
筆者接下來要將右及下方的邊框顏色改成白色：
1 2 3 4 5 6 7 8 | .loading { border: 3px solid #3a3; border-right: 3px solid #fff; border-bottom: 3px solid #fff; height: 50px; width: 50px; border-radius: 50%; } |
這樣畫面看起來是不是很像一個未畫完的半圓形呢？
好了，接下來我們得要使用 @keyframes 來建立一個動畫腳本，而 @keyframes 的使用方法為：
1 2 3 4 5 | @keyframes 動畫腳本名稱 { 動畫時間百分比 { 要改變的 CSS 屬性; } } |
而動畫時間除了使用百分比之外，from 等同於 0%；而 to 則等同於 100%。所以如果我們想要讓 div 區塊從 0 度旋轉到 360 度轉一圈的話，就可以使用 transform 改變 rotate：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @-webkit-keyframes loading { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes loading { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-o-keyframes loading { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
這邊也是得加上各家瀏覽器專有的前綴(vendor prefix)。那已經有一個動畫腳本了，接著在 CSS 中設定使用該動畫腳本：
1 2 3 4 5 6 7 8 9 10 11 12 | .loading { border: 3px solid #3a3; border-right: 3px solid #fff; border-bottom: 3px solid #fff; height: 50px; width: 50px; border-radius: 50%; -webkit-animation: loading 1s infinite linear; -moz-animation: loading 1s infinite linear; -o-animation: loading 1s infinite linear; animation: loading 1s infinite linear; } |
我們使用 animation 屬性來設定：
1 2 3 4 | animation-name: 動畫腳本名稱; animation-duration: 動畫播放時間(速度); animation-iteration-count: 動畫播放次數; animation-timing-function: 播放速度的效果 |
若順利的話就會看到有個圈圈在那邊旋轉囉~
不過...感覺有點單調，筆者還想在圈圈中加上自己的 Logo，所以把 HTML 改成：
1 2 3 4 5 6 | <body> <div class="abgne-loading-20140104-2"> <div class="loading"></div> <div class="word">男</div> </div> </body> |
接著補上 CSS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .abgne-loading-20140104-2 { position: relative; height: 100px; width: 100px; } .loading { height: 100%; width: 100%; } .word { position: absolute; top: 0; left: 0; color: #168; display: inline-block; text-align: center; font-size: 72px; line-height: 72px; font-family: 微軟正黑體, arial; margin: 18px 0 0 20px; padding: 0; } |
最後就能預覽看成果了~
有趣吧！中間的字自己可以替換成其它 Logo 圖片後再試試效果吧！
See the Pen [CSS3]用 CSS3 做載入動畫 - 圓形旋轉式載入動畫 by abgne.tw (@abgne-tw) on CodePen