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

這些進度條看起來非常的簡潔，而且創業十足，令人耳目一新的感覺。要怎么樣在頁面里使用這些loading進條度呢？

下面我以左上角的時鐘為例子，代碼如下：

/* Timer*/

.timer{

width: 24px;

height: 24px;

background-color: transparent;

box-shadow: inset 0px 0px 0px 2px #fff;

border-radius: 50%;

position: relative;

margin: 38px auto;/* Not necessary- its only for layouting*/

}

.timer:after, .timer:before{

position: absolute;

content:"";

background-color: #fff;

}

.timer:after{

width: 10px;

height: 2px;

top: 11px;

left: 11px;

-webkit-transform-origin: 1px 1px;

-moz-transform-origin: 1px 1px;

transform-origin: 1px 1px;

-webkit-animation: minhand 2s linear infinite;

-moz-animation: minhand 2s linear infinite;

animation: minhand 2s linear infinite;

}

.timer:before{

width: 8px;

height: 2px;

top: 11px;

left: 11px;

-webkit-transform-origin: 1px 1px;

-moz-transform-origin: 1px 1px;

transform-origin: 1px 1px;

-webkit-animation: hrhand 8s linear infinite;

-moz-animation: hrhand 8s linear infinite;

animation: hrhand 8s linear infinite;

}

@-webkit-keyframes minhand{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

@-moz-keyframes minhand{

0%{-moz-transform:rotate(0deg)}

100%{-moz-transform:rotate(360deg)}

}

@keyframes minhand{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

@-webkit-keyframes hrhand{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

@-moz-keyframes hrhand{

0%{-moz-transform:rotate(0deg)}

100%{-moz-transform:rotate(360deg)}

}

@keyframes hrhand{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

HTML代碼：

直接使用這些代碼你就可以創建出令人滿意的進度條特效動畫。具體的一些css元素每個人可以根據自己的需要修改。

每個進度條特效的代碼都不同，如果需要其他的特效代碼可以直接下載源碼自己拿出來用。有問題可以參考演示網站，應該容易解決。

傳送門：在線演示?|?原代碼下載? ? 注：文章參考自設計達人。

總結

以上是生活随笔為你收集整理的html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。