进度条ProgressBar

ProgressBar简介

ProgressBar.js 是一个轻量级且易于使用的 JavaScript 库，用于创建响应式和风格化的进度条

特点

• 响应式 SVG 路径动画：ProgressBar.js 使用动态 SVG 路径来创建漂亮的、响应式的进度条效果
• 支持多种形状：内置支持线条、圆形和方形等形状，并允许自定义 SVG 路径以创建独特形状
• 动画和自定义：可以自定义进度条的形状、颜色和动画

基本用法

GitHub
GitHub镜像

官方示例：提供了线、圆、半圆、自定义svg示例;

// cdn
<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.js"></script>
npm i progressbar.js
// 示例_线
var bar = new ProgressBar.Line(container, {
 // 跟踪路径的高度
  strokeWidth: 4,
  // 默认是linear（匀速运动），easeInOut代表慢-快-慢，该配置项具体可以参照CSS3中transition的过渡形式
  easing: 'easeInOut',
  // 执行时间ms
  duration: 1400,
  // 路径颜色也可以是rgb
  color: '#FFEA82',
  // 未填充颜色
  trailColor: '#eee',
  // 未填充路径的高度
  trailWidth: 1,
  // 2个路径整体的宽高
  svgStyle: {width: '100%', height: '100%'},
  // 显示百分比文字的样式，最终生成放文字内容的容器是一个div
  text: {
    // 制定class类名
    className: 'yyh-color',
    style: {
      // 文字颜色,不设置和路径一个颜色
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    // 当有style时会默认添加position: relative; false就是不添加
    autoStyleContainer: false
  },
  // 开始
  from: {color: '#FFEA82'},
  // 结束
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    // 设置跟踪路径颜色变化，颜色会根据from 和to 的渐变
    bar.path.setAttribute('stroke', state.color);
    // 显示进度文字
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});
// animate方法，用来启动进度条动画。
bar.animate(1.0);