radialIndicator.js的使用

radialIndicator是一个简单轻巧的圆形指示器/进度条的插件
插件的上手比较容易，这里记录下在指示器内有图标时做进度动画的使用，具体效果如下：

环形进度条内带图片的效果

第一步引入radialIndicator.js
第二步做环形进度条的HTML结构

<div id="indicatorContainerWrap">
      <div id="indicatorContainer"></div>
      <img src="环形内图片地址"  id="prgLogo"/>
</div>

第三步进行初始化

let radialObj = radialIndicator('#indicatorContainer', {
      radius: 59,
      barColor : '#facb00',
      barWidth : 10,
      initValue : 0,
      maxValue: 30,
      frameNum: 3000,
      displayNumber: false
    });
radialObj.value(30);

插件默认的设置可能不是我们想要的，因此在实例化时可以对一些参数项进行配置，因此需要对配置项进行下说明；

配置项	说明
barColor	环形进度条的颜色
barWidth	环形进度条的宽度
radius	环形内圆的半径值
displayNumber	环形内数字（进度）是否显示
initValue	进度的初始值
minValue	整个环能显示的进度下限值
maxValue	整个环能显示的进度上限值

另外还有frameNum和frameTime两个参数，分别表示整个圆能分成多少帧和从一帧到另一帧所用的时间(单位是毫秒)；

这两个参数目前用到代码里会导致一些其他问题，在网上也没搜索到相应的实例应用；
另：据测试frameNum，frameTime需要和value()方法配合使用，如果和animate()方法一块用的话，进度条是不动的。
根据文档发现，默认的帧数说是500帧，每帧动画时间是10ms；也就是说进度环从minValue到maxValue的时间是5s（用animate()方法的话）

如果让进度条动起来还需要一个定时器

let loadingNum = 1;
let loadingTimer = setInterval(function () {
      if (loadingNum > 30) {
        loadingNum = 1;
        radialObj.value(loadingNum);
      } else {
        radialObj.animate(loadingNum);
        loadingNum += 1;
      }
    }, 1000);

radialObj.value()和radialObj.animate()的区别，用value方法和animate()都是改变进度的值，animate是用动画很圆润的改变，而value()是生硬的改动；

总结
这样环形进度条就动起来；但是会有写停顿，主要原因是，走完进度环设置时间时30s，也就是说比默认的时间超出了6倍，所以会看起来不顺滑；

引用

https://github.com/s-yadav/radialIndicator
http://ignitersworld.com/lab/radialIndicator.htm
http://www.jq22.com/yanshi4495