CSS圆形进度条

原文：https://blog.csdn.net/baidu_39048029/article/details/94413753
参考的是上面教程
自己写一遍加深印象

	.y1{             /*先绘制一个圆*/
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: #ffffff;
        position: relative;
    }
    .y2{			/*再在里面绘制半圆1*/
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: #d80b0b;
        position: absolute;
        clip: rect(0,80px,auto,0);   /*clip 遮罩 半圆需要用到clip*/
        transform: rotate(120deg);		/*调整旋转角度 得到进度条效果*/
        animation: upup  3s;   /*可设置一个加载动画    这里可以不写*/
    }
    @keyframes upup{
		0%{ transform: rotate(0);        /*加载动画 可不要*/
	}
    .y3{			/*再在里面绘制半圆2*/
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: #ffffff;
        position: absolute;
        clip:rect(0,auto,auto,80px);	/*clip 遮罩*/
    }	
    .y4{				/*在中心绘制一个更小的圆    居中*/
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: #d80b0b;
        margin: 0;
        text-align: center;				
        position: absolute;	
        top: 50%;			
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .y4>span{		/* 设置进度字体*/
        display: block;
        font-size: 44px;
        color: white;
        line-height: 10px;
    }

<div class="y1">
     <div class="y2"></div>
     <div class="y3"></div>
     <div class="y4">
         <span>80%</span>
     </div>
 </div>