| 很实用的进度条插件ProgressBar.js | 您所在的位置：网站首页 › js实现下载进度条的方法 › 很实用的进度条插件ProgressBar.js |
很实用的进度条插件ProgressBar.js
|
ProgressBar.js配置参数详解
1，介绍
它是响应式的创建SVG元素的一个插件。不要慌，不懂SVG也没有关系，插件的使用，主要是对配置参数的理解。 这是ProgressBar.js的网站，有动效的展示（我截的静态的图。。。），在如下图所示，右击小铅笔，在新的页面中打开网页，就可以看到小demo的全部代码了。
这是官方配置参数的文档，我会在下面的代码中，详解。
进度条的效果，常见的就是长条形和圆形。当然也可以自定义形状，这里就不做讨论了。
2，案例
下面的2个demo，一个是实现的长条形的，一个是圆形，因为配置参数有所不同，所以分开介绍。 2.1 长条形
// 获取容器节点
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 50会越过圆心， |
【本文地址】
公司简介
联系我们