CSS3實現炫酷進度條

看了一個進度條很漂亮，所以自己試試看

html

<div class="load-container"><span class="run"></span><div class="meter">0</div></div>

css樣式：

* {margin: 0;padding: 0;font-family: 'microsoft yahei';}html,body {width: 100%;height: 100%;background-color: #222;}.load-container {width: 600px;height: 6px;margin: 0 auto;margin-top: 200px;background-image: -webkit-linear-gradient(left,#5bd8ff, #ff0000);border-radius: 5px;position: relative;}.run {position: absolute;    width: 0px;    height: 6px;    right: 0px;    background: #000;    border-radius: 5px;    animation: runnAnimation 10s linear;}@keyframes runnAnimation {0% {width: 600px;}100% {width: 0px;}}.run:after {content: "";display: block;width: 16px;height: 16px;border-radius: 50%;background-color: #f00;margin-left: -4px;margin-top: -4px;animation: destination 10s linear;}@keyframes destination {0% {background-color: #5bd8ff;}100% {background-color: red;}}.meter {float: right;margin-top: 10px;    font-size: 40px;    color: red;    animation: fontColor 10s linear;}@keyframes fontColor {0% {color: #5bd8ff;}100% {color: red;}}.meter:after {content: "%"}

js代碼如下：

window.onload = function() {var meter = document.querySelector('.meter');run(meter,100);function run(el,time) {time = time ? time : 100;el = el ? el : document;var i = 0;var timer = setInterval(function() {if(i<100) {i++;el.innerHTML = i;} else {clearInterval(timer);}},time)}}

效果圖：

如果想要調整進度時間，需要修改css樣式中animation的時間和js中的時間

PS：css未做首碼處理，所有測試都在最新Google瀏覽器下進行