* { margin:0; padding:0 } .waiyuan { width:50px; height:50px; border-radius:50%; background:#dbdbdb; position:relative; margin:100px auto; text-align:center; line-height:50px; } .zhongyuan { width:25px; height:50px; top:0; position:absolute; z-index:3; right:0; overflow:hidden; } .neiyuan { width:46px; height:46px; border:2px solid transparent; border-radius:50%; position:absolute; top:0; border-top:2px solid green; border-right:2px solid green; right:0; transform:rotate(-135deg); } .lefts { left:0; overflow:hidden; } .neiyuan-leftss { width:46px; height:46px; border:2px solid transparent; border-radius:50%; position:absolute; top:0; border-top:2px solid green; border-right:2px solid green; left:0; transform:rotate(45deg); }
改变progress(xx)里xx的值就行了