loading-css

最新推荐文章于 2023-07-11 11:07:51 发布

montaellis

最新推荐文章于 2023-07-11 11:07:51 发布

阅读量448

点赞数

分类专栏： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>title</title>
</head>
<body>

	<style>
		* {padding: 0; margin: 0; list-style: none; font-family: "microsoft Yahei";}
		body {background: #000; padding: 50px; color: #fff;}
		#loading {width: 400px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px;
			background: linear-gradient(90deg, #09f 0%, #09f 50%, #999 50%, #999 100%);
			font-size: 20px;
		}
		#loading .forward {color: transparent;
			background: linear-gradient(90deg, #fff 0%, #fff 50%, #09f 50%, #09f 100%);
			-webkit-background-clip: text;
		}
	</style>

	<div id="loading">
		<div class="forward">50%</div>
	</div>

	<script>
	;(function(){
		var loading=document.querySelector('#loading');
		var forward=loading.querySelector('.forward');

		var count=0;
		setInterval(function(){
			count++;
			if(count==100)count=0;

			loading.style.background='linear-gradient(90deg, #09f 0%, #09f '+count+'%, #999 '+count+'%, #999 100%)';
			forward.style.backgroundImage='linear-gradient(90deg, #fff 0%, #fff '+count+'%, #09f '+count+'%, #09f 100%)';
			forward.innerHTML=count+'%';
		}, 60);
	})();
	</script>

</body>
</html>

css3

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>title</title>
</head>
<body>

	<style>
		* {padding: 0; margin: 0; list-style: none; font-family: "microsoft Yahei";}
		body {background: #000; padding: 50px; color: #fff;}
		#loading {width: 400px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px; font-size: 20px; overflow: hidden; position: relative;}
		#loading div {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
		#loading .back {background: #ccc; color: #09f;}
		#loading .forward {width: 30%; background: #09f; overflow: hidden;}
		#loading .forward span {position: absolute; left: 0; top: 0;}
	</style>

	<div id="loading">
		<div class="back"><span>50%</span></div>
		<div class="forward"><span>50%</span></div>
	</div>

	<script>
	;(function(){
		var loading=document.querySelector('#loading');
		var back=loading.querySelector('.back');
		var forward=loading.querySelector('.forward');
		var spanBack=back.querySelector('span');
		var spanForward=forward.querySelector('span');

		var count=0;
		setInterval(function(){
			count++;
			if(count==100)count=0;
			spanForward.innerHTML=spanBack.innerHTML=count+'%';
			spanForward.style.left=spanBack.offsetLeft+'px';
			forward.style.width=count+'%';
		}, 60);
	})();
	</script>

</body>
</html>

css2

转自妙味课堂摘星

montaellis

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
loading-css

title * {padding: 0; margin: 0; list-style: none; font-family: "microsoft Yahei";} body {background: #000; padding: 50px; color: #fff;} #loading {width: 400px; height: 30px; line-height: 30
复制链接

扫一扫

专栏目录