radialindicat圆形进度条

radialindicat圆形进度条

效果：

步骤：

1. 引入文件:

<script src="radialIndicator.js"></script>

1. html:

<div class="num_part" id="in{[item.couponId]}" ng-init="loadContainer(item)">
         <span class="num_alread">已抢<i>{[(item.couBound/(item.couBound + item.couCount))*100 |limitTo:2]}%</i></span>  

  </div>

3: js:

     $scope.loadContainer = function(item) {
            var itemPercent = (item.couBound / (item.couBound + item.couCount)) * 100;
              //环形进度条
            var rad_con= radialIndicator('#in'+item.couponId,{
              radius: 50, //定义圆形指示器的内部的圆的半径。
              barBgColor: "#CCC", //定义圆形指示器的刻度条的背景颜色。
              barColor: "#99CC33", //指示器数值样式
              percentage: true, //设置为true显示圆形指示器的百分比数值。
              initValue: itemPercent, //圆形指示器初始化的值。
              minValue: 0, //圆形指示器的最小值。
              maxValue: 100,
              fontSize: 12,
              fontWeight: "normal"
            });
            rad_con.animate(200);
          }