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未做前缀处理，所有测试都在最新谷歌浏览器下进行