原生javascript或css实现进度条

我使用了两种方式来实现进度条状态,一种是使用js,另一种是使用css3.


<!doctype>
<html>
<head>

<style>
.wrapper {
	width: 300px;
	height: 30px;
	background-color: #aaaaaa;
	margin: 100px auto;
	border-radius: 25px;
	box-shadow: 5px -5px 10px #123456
}
.load-bar {	
	width: 0%;	
	height: 30px;
	text-align: center;
	background-color: green;
	border-radius: 25px;
	transition: width 4s;
	-webkit-transition: width 4s;
	-moz-transition: width 4s;
	-o-transition: width 4s;
}

.load-bar-action {
	width: 100%;	
	background-color: green;
}
</style>

<script type="text/javascript">
window.onload = function() {	
	//原生js实现进度条		
	var loader = document.getElementById("loader");
	var inc = 0, showtime = 0;	
	var loader_time = setInterval(function(){
		inc++;
		loader.style.width = inc + "%";				
		(function(showInc) {
			setTimeout(function(){
				console.log (showInc);
				loader.innerHTML = showInc+"%";},
			showtime);
		})(inc);		
		showtime += 35;
		if (inc == 100) {			
			clearInterval(loader_time);
		}
	}, 10);		
	//css3实现进度条
	/*
	var loader = document.getElementById("loader");
	var inc = 0;
	loader.className += " load-bar-action";
	var loader_time = setInterval(function(){
		inc++;
		//loader.style.width = inc + "%";	
		loader.innerHTML = inc+"%";		
		if (inc == 100) {			
			clearInterval(loader_time);
		}
	}, 35);		
	*/
}
</script>
</head>
	<body>
	<div class="wrapper" id="wrapper">		
		<div class="load-bar" id="loader">	
			0%		
		</div>		
	</div>
	</body>
</html>

进度条进度的显示有待进一步优化。如果您有什么好办法,希望您能写个评论,说说您的解决办法。

你可能感兴趣的:(原生javascript或css实现进度条)