ProgressBar.js
ProgressBar.js配置参数详解
1，介绍
它是响应式的创建SVG元素的一个插件。不要慌，不懂SVG也没有关系，插件的使用，主要是对配置参数的理解。
这是ProgressBar.js的网站，有动效的展示（我截的静态的图。。。），在如下图所示，右击小铅笔，在新的页面中打开网页，就可以看到小demo的全部代码了。
1.img
- 这是官方配置参数的文档，我会在下面的代码中，详解。
- 进度条的效果，常见的就是长条形和圆形。当然也可以自定义形状，这里就不做讨论了。
2，案例
下面的2个demo，一个是实现的长条形的，一个是圆形，因为配置参数有所不同，所以分开介绍。
2.1 长条形
2.img
<!--首先，需要引入插件-->
<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 圆形
3.img
-
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，就是一个未填充的圆形，而不是圆环。要么设置为0
easing: '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的渐变效果
4.img
strokeWidth: 5,
trailWidth: 0,
fill: 'salmon', // 圆形内容区域填充色
from: { color: '#aaa', width: 1},
to: { color: '#333', width: 5},
circle.path.setAttribute('stroke-width', state.width);
转载
作者：非梧不栖
