![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.circle { 80px; height: 80px; position: relative; border-radius: 50%; margin: 0 auto; background: rgba(237, 113, 97, 1); } .pie_left, .pie_right { 80px; height: 80px; position: absolute; top: 0; left: 0; } .left, .right { display: block; 80px; height: 80px; background: rgba(205, 235, 255, 1); border-radius: 50%; position: absolute; top: 0; left: 0; } .pie_right, .right { clip: rect(0,auto,auto,40px); } .pie_left, .left { clip: rect(0,40px,auto,0); } .mask { 76px; height: 76px; border-radius: 50%; left: 2px; top: 2px; background: rgba(52,151,216,1); position: absolute; text-align: center; line-height: 76px; font-size: 16px; color: #FFFFFF; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="circle" id="errorProportion"> <div class="pie_left"> <div class="left"></div> </div> <div class="pie_right"> <div class="right"></div> </div> <div class="mask"> <span data-proportion="0">0</span> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.extend({ rings:function($ringId,$ringColor){ $('#'+$ringId).each(function(index, el) { var num = $(this).find('span').attr('data-proportion') * 3.6; $(this).css('background',$ringColor); if (num<=180) { $(this).find('.right').css('transform', "rotate(" + num + "deg)"); $(this).find('.left').css('transform', "rotate(0deg)"); } else { $(this).find('.right').css('transform', "rotate(180deg)"); $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)"); }; }); } })
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$.rings('correctProportion','rgba(137, 192, 89, 1)');