html进度条圆形,用css实现圆形进度条

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

代码：

PHP中文网

*{

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;

}

}

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

相关推荐：