开源达人 html+css+js 进度条实例

<style type="text/css">
	#myProgress {
	  width: 100%;
	  background-color: #ddd;
	}
	
	#myBar {
	  width: 1%;
	  height: 30px;
	  background-color: #4CAF50;
	}
</style>

<p>
	<button onclick="myMove()">点我</button>
</p>

<div id="myContainer">
	<div id="myBar"></div>
</div>

<script>
	function myMove(){
		var myContainer = document.getElementById('myContainer');
		var myBar = document.getElementById('myBar');
		var x = 1;
		var id = setInterval(Move,10);//1000 = 1秒;
		
		function Move(){
			if(x >= 1000){
				clearInterval(id);
			}else{
				x++;
				myBar.style.width = x + "px";
				
			}
		}
	}
</script>