.percentloop{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden}.percentloop .circle-left,.percentloop .circle-right{position:absolute;top:0;left:0;width:50%;height:100%;background-color:red;overflow:hidden}.percentloop .circle-left>div,.percentloop .circle-right>div{width:100%;height:100%;background-color:#ccc;transform-origin:right center}.percentloop .circle-right{left:50%}.percentloop .circle-right>div{transform-origin:left center}.percentloop .number{position:absolute;top:9%;bottom:9%;left:9%;right:9%;background-color:#fff;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}.percentloop .number>div{color:#333;text-align:center}.percentloop .number>div>p{font-size:18px;font-family:PingFang;font-weight:500;color:#333}.percentloop .number>div>font{font-size:30px;font-family:PingFang;font-weight:700;color:#333}