ProgressBar.js配置参数详解

1，介绍

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

• 这是ProgressBar.js的网站，有动效的展示（我截的静态的图。。。），在如下图所示，右击小铅笔，在新的页面中打开网页，就可以看到小demo的全部代码了。

• 这是官方配置参数的文档，我会在下面的代码中，详解。
• 进度条的效果，常见的就是长条形和圆形。当然也可以自定义形状，这里就不做讨论了。

2，案例

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

2.1 长条形

<!--首先，需要引入插件-->
<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.js"></script>
<script>// 获取容器节点let container = document.querySelector('#container')/** 先介绍稍微难理解的参数* 首先，进度条的实现，要有一个准备填充的矩形作为背景被填充，还要有一个进行填充的矩形。*   所以，两个矩形肯定是重叠在一起的。而这些生成的矩形，就是以SVG元素的形式显示。* @strokeWidth 跟踪路径，指慢慢边长，进行填充的那个矩形。* @trailWidth 未填充路径，指作为背景被填充的矩形。* @svgStyle SVG元素（2个矩形）面积占容器的百分比。* *//** 结论先行：一般显示的效果，strokeWidth和trailWidth这2个的值，只需要设置strokeWidth: 1 即可。* 原因：* strokeWidth的值number类型，表示跟路径的高度占容器的百分比，*   所以，数值为1就已经占满容器的高度，>1会有副作用，下面会介绍。* trailWidth的值number类型，表示未填充路径的高度占容器的百分比，*   如果不设置，默认等于strokeWidth的值，并且会被strokeWidth影响到：*   所以它最终的值：trailWidth=(trailWidth/strokeWidth)*height（height为容器高度）* 也就是说，strokeWidth和trailWidth的值同时设置，且不相等时，trailWidth的值可能不会如预期效果显示。* */let bar = new ProgressBar.Line(container, {strokeWidth: 1, // 跟踪路径的高度easing: 'easeInOut',  // 运动形式，默认是linear（匀速运动），easeInOut代表慢-快-慢，该配置项具体可以参照CSS3中transition的过渡形式duration: 5000,  // 走完整体时间（ms）color: 'salmon',  // 跟踪路径颜色（单词，16进制，rgb都可以）trailColor: 'blue',   // 未填充路径颜色（同上）trailWidth: 1,  // 未填充路径的高度svgStyle: {width: '100%', height: '100%'},   // 2个路径整体的宽高text: {   // 显示百分比文字的样式，最终生成放文字内容的容器是一个div// className可以指定文字容器的class名称，但是注意，所有在配置项style中写的样式都会转为内联样式，// 并且像color这种不设置，会继承其他配置项的样式，也会设置为内联样式。className: 'text-color',// 百分比文字的样式style: {color: 'green',   // 不设置的话，继承跟踪路径颜色position: 'absolute',textAlign: 'right',top: '0',padding: 0,margin: 0,// 如果要设置transform，直接设置，亲测好像不行，只能按照官网给出的写法。transform: {prefix: true,  // 自动加浏览器前缀value: 'translate(-100%, 70%)'}},// 一旦上面的style选项中写了样式，则自动会给容器添加position: relative;//（我觉得主要考虑的是文字的位置，一般在设置时，使用定位更方便一点，所以才会自动添加），// 可以通过设置下面这个属性为false，禁止自动给容器添加。autoStyleContainer: false,},// 下面三个配置项是配合使用的。// from指定进度条（根据上面所列配置项指定）开始的样式，to指定结束的样式。样式的变化自动会有过渡效果。// 这个demo中，只展示了颜色的变化，可以同时指定多个样式，比如还可以指定width的渐变等等。// step，第一个参数代表的就是管理from和to中样式的状态对象，根据state.color应该就很好理解了。//   第二个参数，就是实例对象（JavaScript代码最顶部生成的那个）from: {color: '#FFEA82'},to: {color: '#ED6A5A'},step: (state, bar) => {// 下面的bar.xxx都是在官网中介绍有案例使用的属性。// 设置跟踪路径颜色变化，颜色会根据from 和to 的渐变bar.path.setAttribute('stroke', state.color);// 设置百分比文字可以随着，跟随路径的不断填充而实时变化。// bar.setText(Math.round(bar.value() * 100) + ' %');// 我为了实现当进度条走到一定距离时，在显示文字，所以加了一个判断let value = Math.round(bar.value() * 100);if (value <= 5) {bar.setText('');} else {bar.setText(value+'%');}// 下面这个设置，主要是想实现文字的位置随着进度条的增长，跟着变化。bar.text.style.left = Math.round(bar.value() * 100) + '%';}});// animate方法，用来启动进度条动画。// 第一个参数 0.0 ~ 1.0 指定动画结束的百分比，一般都为1，进度条就会跑完整个矩形。// 第二个参数，配置项（这里没有写，感觉有点多余），如果配置的话，会重写上面的配置项，//   比如{duration: 4000} 会重写上面的duration。// 第三个参数，回调函数，在动画执行完成之后执行，也就是进度条走完。这里放一些处理逻辑。bar.animate(1, function () {console.log('动画结束，萌萌哒')});
</script>
复制代码

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

2.2 圆形

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

<div id="container"></div>
复制代码

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

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

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

<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.js"></script>
<script>let container = document.querySelector('#container')var bar = new ProgressBar.Circle(container, {color: 'salmon',strokeWidth: 50,  // 正好是从圆心开始画起，>50会越过圆心，<50画出的是圆环trailWidth: 50,  // 也设置为50，就是一个未填充的圆形，而不是圆环。要么设置为0easing: 'easeInOut',duration: 5000,text: {style: {color: 'yellow',display: 'inline-block',position: 'absolute',top: '50%',left: '50%',transform: 'translate(-50%,-50%)'},autoStyleContainer: false},// fill: 'salmon',   // 圆形内容区域填充色，当需要画圆环时，效果应该最好。from: { color: '#aaa'},to: { color: '#333'},step: function(state, circle) {circle.path.setAttribute('stroke', state.color);var value = Math.round(circle.value() * 100);circle.setText(value+'%');}});bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';bar.text.style.fontSize = '2rem';bar.animate(1.0, function () {console.log('动画执行结束')});</script>
复制代码

• 这个是width的渐变效果

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