原生javascript或css实现进度条

最新推荐文章于 2023-07-04 17:24:04 发布

Dijason

最新推荐文章于 2023-07-04 17:24:04 发布

阅读量3.1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Dijason/article/details/8770282

版权

web 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

我使用了两种方式来实现进度条状态，一种是使用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>

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

Dijason

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生javascript或css实现进度条

我使用了两种方式来实现进度条状态，一种是使用js，另一种是使用css3..wrapper { width: 300px; height: 30px; background-color: #aaaaaa; margin: 100px auto; border-radius: 25px; box-shadow: 5px -5px 10px #123456}.l
复制链接

扫一扫