很实用的进度条插件ProgressBar.js

ProgressBar.js配置参数详解

1，介绍

它是响应式的创建SVG元素的一个插件。不要慌，不懂SVG也没有关系，插件的使用，主要是对配置参数的理解。

• 这是ProgressBar.js的网站，有动效的展示（我截的静态的图。。。），在如下图所示，右击小铅笔，在新的页面中打开网页，就可以看到小demo的全部代码了。
• 这是官方配置参数的文档，我会在下面的代码中，详解。
• 进度条的效果，常见的就是长条形和圆形。当然也可以自定义形状，这里就不做讨论了。

2，案例

下面的2个demo，一个是实现的长条形的，一个是圆形，因为配置参数有所不同，所以分开介绍。

2.1 长条形

复制代码

以上就是长条形的实现。代码亲测可行。

2.2 圆形

• html代码，就一个div作为容器

"container">
复制代码

• css代码，设置margin是为了进度条的开始部分不在页面边缘，为了显示效果更好。设置position为相对定位，是因为显示进度条的百分比提示文字，默认会绝对定位！

#container {
  margin: 20px;
  width: 100px;
  height: 100px;
  position: relative;
}
复制代码

• JavaScript代码，各个配置参数，会在注释中，详细说明。这是官方配置参数的文档

复制代码

• 这个是width的渐变效果

strokeWidth: 5,
trailWidth: 0,
fill: 'salmon',   // 圆形内容区域填充色
from: { color: '#aaa', width: 1},
to: { color: '#333', width: 5},
circle.path.setAttribute('stroke-width', state.width);  
复制代码

转载于:https://juejin.im/post/5b33ad096fb9a00e8f7975ac