用css实现圆形进度条

韦小宝 原创: 2017-11-18 11:28:04 2308浏览

利用纯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中文网其它相关文章！

样式表 css 进度条 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：jquery实现通过ip获取地址下一条：css鼠标悬停动画