Home > Article > Web Front-end > Implement circular progress bar using css
Implement circular progress bar using css
- 韦小宝Original
- 2017-11-18 11:28:042735browse
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 ~~
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>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
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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery implements obtaining address through ipNext article：jquery implements obtaining address through ip