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
网友评论