css进度条

最新推荐文章于 2023-11-09 17:45:54 发布

timelessmemoryli

最新推荐文章于 2023-11-09 17:45:54 发布

阅读量843

点赞数

分类专栏： js html+css/html5 文章标签： css进度条

本文链接：https://blog.csdn.net/u014788227/article/details/52221476

版权

js 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

html+css/html5

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条</title>
<script type="text/javascript" src="https://staging.quncrm.com/build/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		function longer() {
			var time = new Date();
			var cur = time.getSeconds() == 0 ? 60 : time.getSeconds();
			var val = parseInt(cur / 60 * 100);
			$('.progress').css('width', val + '%');
			$('.progressVal').text(val + '%');
		}

		setInterval(longer, 1000);
	})
</script>
<style type="text/css">
#bg { 
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	width: 800px;
}

#bg li:nth-child(1) { 
	margin: 0px;
	background: #fff; 
	height: 5px;
	width: 800px;
	border-radius: 3px; 
	border-left: 1px solid #111; 
	border-top: 1px solid #111; 
	border-right: 1px solid #333; 
	border-bottom: 1px solid #333;  
}

.progress {   
	position: absolute;
	width: 100%;
	height: 1px;
	margin: 2px 0; 
	background: #2187e7;
	box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
	-moz-transition: width 1s ease-out;  
	-webkit-transition: width 1s ease-out;       
}

.progressVal {
	display: block;
	margin: 0 auto;
	color: #2187e7;
	width: 50px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}
</style>
</head>
	<body>
		<ul id="bg">
			<li><span class="progress"></span></li>
			<li><span class="progressVal"></span></li>
		</ul>
	</body>
</html>

timelessmemoryli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css进度条

进度条 $(function() { function longer() { var time = new Date(); var cur = time.getSeconds() == 0 ? 60 : time.getSeconds(); var val = parseInt(cur / 60 * 100); $('.progress').css('width'
复制链接

扫一扫