当在使用流程的时候，比如有一个审核流程，有三个阶段：开始，审核中，审核成功。当在不同的阶段，做相应的进度显示，当显示时，是以动画的形式显示的。话不多说，我们开始打造吧。
首先，我考虑的是使用canvas来打造这个控件，于是我现在demo.html里新建了一个canvas用来显示测试用，并且先预计了几个属性值，在做的过程中增增改改，最终属性如下：
不支持 HTML5 canvas 标签。
然后开始编写相应的js文件，我将其命名为ct_progress.js。我的目的是打造一款使用者可以自由配置的显示控件，于是定义了一下可配置的属性：
属性完成，开始使用canvas使用这些属性值开始进行初始化画图：
此时画出了一个静态的没有进度的流程进度条。然后为这个进度条加上显示时的动画：
j)
{
ctx.beginPath();
ctx.fillStyle=fillColour;
ctx.fillRect(r+j*space+padding,r);//前面两个左上角坐标，后面两个宽高
//clearArc(ctx,r+j*space+padding,1);//清除圆部
}
else
{
if(i=showW)
{
clearInterval(int);
}
proW+=speed;
},150);
这样便完成了一个简单的带显示动画的流程进度条。最终效果如下：
具体控件使用以及源码，详见github:点击打开链接希望学习或有用到的童鞋star一下，感谢
总结
以上所述是小编给大家介绍的基于JS实现带动画效果的流程进度条。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/32058.html