Implement circular progress bar using css-HTML Tutorial-php.cn

Implement circular progress bar using css

韦小宝

Release： 2017-11-18 11:28:04

Original

2858 people have browsed it

Use pure css to implement Progress bar Small application, you can use it on other pages or you can study it yourself ~ Provide free source code ~~

Implement circular progress bar using css

Code:

<!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>

Copy after login

Get it for free and study it! More good source codes are available on PHP Chinese website, follow us and give you a good look~

Related recommendations:

css, jquery to achieve 3D three-dimensional rotation

##css ripple animation

css realizes moving cat face

The above is the detailed content of Implement circular progress bar using css. For more information, please follow other related articles on the PHP Chinese website!