百度到 jquery+css 生成 环形进度条
/css3/create-radial-progress-bar-with-jQuery-and-css3.html
其中根据两种进度条颜色 有两个demo。
css样式：
<style>body {font-family: "微软雅黑";}.circle {width: 200px;height: 200px;position: absolute;border-radius: 50%;background: #0cc;}/*这一层的作用主要是控制其中的旋转div，不是其相互遮掩*/.pie_left, .pie_right {width:200px; height:200px;position: absolute;top: 0;left: 0;/*background-color: black;//#00aacc*/}.left, .right {width:200px; height:200px;background:gainsboro;border-radius: 50%;position: absolute;top: 0;left: 0;/*transform: rotate(180deg);*/}.pie_right, .right {clip:rect(0,auto,auto,100px);}.pie_left, .left {clip:rect(0,100px,auto,0);}.mask {width: 170px;height: 170px;border-radius: 50%;left: 15px;top: 15px;background: #FFF;position: absolute;text-align: center;//line-height: 150px;font-size: 20px;font-weight: bold;color: #b2b4b9;z-index: 10;}</style>
div：
<div class="circle" style="left:0"><div class="pie_left"><div class="left" id="left"></div></div><div class="pie_right"><div class="right" id="right"></div></div><div class="mask"><!--<input id="in" type="text" value="60" style="width: 50px;"/>%--><div style="margin-top: 50px; color: #31384d; font-size: 36px; "><span id="rate">80</span>%</div><div>成功率</div></div></div>
js:
<script type="text/javascript">$(function() {$('.circle').each(function(index, el) {var num = $(this).find('span').text() * 3.6;if (num<=180) {$(this).find('.right').css('transform', "rotate(" + num + "deg)");} else {$(this).find('.right').css('transform', "rotate(180deg)");$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");};});});$("#in").blur(function(){var num = $(this).val() * 3.6;alert(num);if (num<=180) {$('#right').css('transform', "rotate(" + num + "deg)");$('#left').css('transform', "rotate(" + 0 + "deg)");} else {$('#right').css('transform', "rotate(180deg)");$('#left').css('transform', "rotate(" + (num - 180) + "deg)");};});</script>
效果图：
希望能有助于大家，如有错误，望路过大佬谅解和指点
