12個創新的純CSS3進度條特效 動畫效果很漂亮

進度條是很常用的一個用戶體驗項，用於表示事件的處理或加載狀態，製作這些loading進度條我們通常會使用GIF圖片來實現，但是這方法也有一些弊端，比如我要放大或改變顏色，這樣就不好處理了。 要解決這些問題最好就是用代碼來實現了，現在CSS3已經流行起來，我們是否也嘗試一下用CSS來實現呢?方法是有的，而且很簡單，看看今天設計達人網爲大家分享的12個使用純CSS3編寫的進度條，loading圖標和動畫都很棒哦

工具/原料

css

方法/步驟

1如下圖：

2這裏我特別製作成GIF圖片方便大家瀏覽，這些loading的icon 圖標動畫各有特色，有充電狀態、眼睛轉動、時鐘轉動動畫、加精的點點點等等，都是很有創意的設計哦!

3是不是很好看而又創新呢?那麼我們如何使用這些loading進條度應用在優秀網頁設計上呢?下面我以左上角的'時鐘爲例子，代碼如下： 進度條CSS代碼：

4/*Timer*/r{width:24px;height:24px;box-shadow:inset0px0px0px2px#fff;border-radius:50%;position:relative;margin:38pxauto;/*Notnecessary-itsonlyforlayouting*/}r:after,r:before{position:absolute;content:"";}r:after{width:10px;height:2px;top:11px;left:11px;-webkit-transform-origin:1px1px;-moz-transform-origin:1px1px;transform-origin:1px1px;-webkit-animation:minhand2slinearinfinite;-moz-animation:minhand2slinearinfinite;animation:minhand2slinearinfinite;}r:before{width:8px;height:2px;top:11px;left:11px;-webkit-transform-origin:1px1px;-moz-transform-origin:1px1px;transform-origin:1px1px;-webkit-animation:hrhand8slinearinfinite;-moz-animation:hrhand8slinearinfinite;animation:hrhand8slinearinfinite;}@-webkit-keyframesminhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframesminhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframesminhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframeshrhand{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframeshrhand{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@keyframeshrhand{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

5HTML代碼：

6怎麼樣?是不是很簡單呢?日後使用這些CSS編寫的loading進度條就非常方便的改大小和顏色啦!