CSS3实现炫酷进度条

Posted 2022-12-06 wukongk

看了一个进度条很漂亮，所以自己试试看

html

<div class="load-container">
		<span class="run"></span>
		<div class="meter">0</div>
	</div>

css样式：

* 
			margin: 0;
			padding: 0;
			font-family: 'microsoft yahei';
		
		html,body 
			width: 100%;
			height: 100%;
			background-color: #222;
		
		.load-container 
			width: 600px;
			height: 6px;
			margin: 0 auto;
			margin-top: 200px;
			background-image: -webkit-linear-gradient(left,#5bd8ff, #ff0000);
			border-radius: 5px;
			position: relative;
		
		.run 
			position: absolute;
    		width: 0px;
    		height: 6px;
    		right: 0px;
    		background: #000;
    		border-radius: 5px;
    		animation: runnAnimation 10s linear;
		
		@keyframes runnAnimation 
			0% 
				width: 600px;
			
			100% 
				width: 0px;
			
		
		.run:after 
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: #f00;
			margin-left: -4px;
			margin-top: -4px;
			animation: destination 10s linear;
		
		@keyframes destination 
			0% 
				background-color: #5bd8ff;
			
			100% 
				background-color: red;
			
		
		.meter 
			float: right;
			margin-top: 10px;
    		font-size: 40px;
    		color: red;
    		animation: fontColor 10s linear;
		
		@keyframes fontColor 
			0% 
				color: #5bd8ff;
			
			100% 
				color: red;
			
		
		.meter:after 
			content: "%"
		

js代码如下：

window.onload = function() 
			var meter = document.querySelector('.meter');
			run(meter,100);

			function run(el,time) 
				time = time ? time : 100;
				el = el ? el : document;	
				var i = 0;
				var timer = setInterval(function() 
					if(i<100) 
						i++;
						el.innerHTML = i;
					 else 
						clearInterval(timer);
					
				,time)
			
		

效果图：

如果想要调整进度时间，需要修改css样式中animation的时间和js中的时间

PS：css未做前缀处理，所有测试都在最新谷歌浏览器下进行