Sometimes a man has to work hard

preface

1 introduction

A constructor

Line/Circle/SemiCircle/Square

New Progressbar. Line('#container', options) New Progressbar.circle (document.getelementById ('container'), Options) // New ProgressBar.SemiCircle(this.refs.container, // Square new Progressbar. Square(this.refs.container, options)Copy the code

Path

</ SVG > <path id="path" d="M100 100 L300 100"Copy the code

Common options options

{// SVG fill: 'rgba(0, 0, 0, 0.5)', // trailColor: '#eee', // line color: '#555', // line color strokeWidth: 10, // line width // text text: {value: '0', // default value style: {// style position: 'absolute', left: '50%', top: '50%', padding: 0, margin: 0, fontSize: '2rem', color: '#f00' }, // animation attrs duration: 2500, easing: 'easeInOut', // animation params from: {color: '#eee', width: 1}, // animation Params from: {color: '#eee', width: 1}, // animation Params from: {color: '#eee', width: 1} }, // callback step: Function (state, circle) {progress const {color, Width} = state // percentage of progress const value = math.round (circle. Value () * 100) circle.path.setAttribute('stroke', color) circle.path.setAttribute('stroke-width', width) } }Copy the code

Common attribute attr

path

/ / circle path. The pathCopy the code

text

/ / text circle pathCopy the code

Common methods

animate

// Start animate 0-1.Copy the code

set

// Set the initial progress to 0-1 circle. Set (progress)Copy the code

setText

// Assign the value circle. SetText (text)Copy the code

setAttribute

// Change color // change line width circle.path.setAttribute('stroke', color) circle.path.setAttribute('stroke-width', width)Copy the code

2 use

The installation

npm i progressbar.js --save
Copy the code

The introduction of

import ProgressBar from 'progressbar.js'
Copy the code

The progress bar

<template> <div class="BaseSvg"> <div id="container"></div> <div id="progress"></div> <div id="custom"></div> <! - custom path - > < SVG width = "100%" height = "200" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < path id = "path" d = "M10, 30 A20,20,0,0,1,50,30 A20,20,0, 1,90,30 Q90,60,50,90 Q10,60,10,30 Z" fill="# CCC "stroke="red" stroke-width="3" stroke-linecap="round" transform="translate(130, 50) scale(1.5)" /> </ SVG > </div> </template> <script> import ProgressBar from 'progressbar.js' export default { mounted() { console.log('ProgressBar', ProgressBar) this.drawLine() this.drawCircle() this.drawPath() }, methods: { // Line Circle SemiCircle Square drawLine() { const line = new ProgressBar.Line('#container', { color: '#409EFF' // strokeLinecap: 'round' // strokeDasharray: '20, 4' }) console.log('line', line) line.animate(1) }, drawCircle() { const circle = new ProgressBar.Circle('#progress', { color: '#555', trailColor: '#eee', strokeWidth: 10, duration: 2500, easing: 'easeInOut', // fill: 'rgba(0, 0, 0, 0.5)', text: {// Default: null value: '100', // Default: 'progressbar-text' className: 'progressbar__label', // Default: object speficied below style: { // Default: same as stroke color (options.color) color: '#f00', position: 'absolute', left: '50%', top: '50%', padding: 0, margin: 0, fontSize: '2rem', // You can specify styles which will be browser prefixed transform: { prefix: true, value: 'translate(-50%, -50%)' } }, // Only effective if the text.style is not null // By default position: relative is applied to container if text // is set. Setting this to false disables that feature. autoStyleContainer: true, // Default: true alignToBottom: true }, from: { color: '#eee', width: 1 }, to: { color: '#000', width: 10 }, step: function(state, circle, attachment) { // console.log('step:state', state) // console.log('step:circle', circle) // console.log('step:attachment', attachment) const { color, width } = state const value = Math.round(circle.value() * 100) circle.setText(value + '%') circle.path.setAttribute('stroke', color) circle.path.setAttribute('stroke-width', Set (0.05) setTimeout(function() {circulation.animate (0.3)}, 1000) setTimeout(function() {.animate(0.4)}, 500) setTimeout(function() {.animate(0.8)}, 5500) setTimeout(function() { circle.animate(1) }, 8000) }, drawPath() { const custom = new ProgressBar.Path('#path') custom.animate(1) } } } </script> <style lang="scss" scoped> .BaseSvg { & > div { margin-top: 40px; } } </style>Copy the code

3. Pay attention to

2. To create a custom Path, use the Path method and pass in a DOM element labeled Path

The end of the

Night breeze some cool, darling cover quilt, don’t catch a cold oh ~

Good night ^_^

Refer to the link

  • Progressbar document
  • Progressbar official case
  • Some attributes of SVG

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to
  • So, how about a VUE plugin (15) every day — Vue-Content-Placeholder
  • Learn a vUE plugin every day (16) – VUe-video-player
  • Learn a vue plugin every day (17) — js-file-download
  • Learn a VUE plugin (18) every day — JS-Audio-Recorder
  • Learn a VUE plugin (19) every day – VUe-TreesELECT