用css实现圆形进度条-html教程-PHP中文网

用css实现圆形进度条

韦小宝

发布： 2017-11-18 11:28:04

原创

3007人浏览过

利用纯css实现进度条小应用，可以放在其他的页面使用也可以自己研究~免费提供源码~~

@HX)M`G4QHO%_BHT}6XR`IC.png

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>PHP中文网</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.progress-ring{
				width: 160px;   
			    height: 160px;   
			    border:20px solid green;   
			    border-radius: 50%; 
			    box-sizing: border-box;
			    position: absolute;
			    top: 0;
			    left: 0;
			}
			.progress-track{
				width: 160px;   
			    height: 160px;   
			    border:20px solid green;   
			    border-radius: 50%; 
			    box-sizing: border-box;
			    position: absolute;
			    clip: rect(0px,80px,160px,0px);
			    top: -20px;
			    left: -20px;
			}
			.progress-left{
				position:relative;
				width: 160px;   
			    height: 160px;   
			    border:20px solid goldenrod;   
			    border-radius: 50%; 
			    box-sizing: border-box;
			    position: absolute;
			    clip: rect(0px,80px,160px,0px);
			    top: -20px;
			    left: -20px;
			    transform: rotate(3.6deg);
    			transition: transform 2s linear;
    			animation:mymove 3s linear  forwards;
			}	
			.progress-right{
				width: 160px;   
			    height: 160px;   
			    border:20px solid goldenrod;   
			    border-radius: 50%; 
			    box-sizing: border-box;
			    position: absolute;
			    clip: rect(0px,80px,160px,0px);
			    top: -20px;
			    left: -20px;
			    transform: rotate(180deg);
			    opacity: 0;
                animation: toggle 0s ease 1.5s  forwards  ;
			}
			.progress-cover{
				position:relative;
				width: 160px;   
			    height: 160px;   
			    border:20px solid green;   
			    border-radius: 50%; 
			    box-sizing: border-box;
			    position: absolute;
			    clip: rect(0px,80px,160px,0px);
			    top: -20px;
			    left: -20px;
			    opacity: 1;
			    animation: toggleq 0s ease 1.5s  forwards  ;
			}
			@keyframes mymove{
				from{transform: rotate(0deg)}
				to{transform: rotate(360deg)}
			}
			@keyframes toggle{
			    0% {
			        opacity: 0;
			    }
			    100% {
			        opacity: 1;
			    }
			}
			@keyframes toggleq{
			    0% {
			        opacity: 1;
			    }
			    100% {
			        opacity: 0;
			    }
			}
		</style>
	</head>
	<body>
		<div class="progress-ring">  
		    <div class="progress-track"></div>
		    <div class="progress-left"></div>
		    <div class="progress-right"></div>
		    <div class="progress-cover"></div>
		    <div class="inn"></div>
		</div>  
	</body>
</html>

登录后复制

免费拿去研究吧！更多好的源码尽在PHP中文网，关注我们给你好看哦~

相关推荐：

css 、jquery实现3d立体旋转

立即学习“前端免费学习笔记（深入）”；

css波纹动画

css实现会动的猫脸

以上就是用css实现圆形进度条的详细内容，更多请关注php中文网其它相关文章！