vue-progress

Progressbar.js as a Vue Component

How to use

Install

1npm install vue-progressbar.js

Import

1import VueProgressBar from 'vue-progressbar.js'
2Vue.use(VueProgressBar)

Component Usage

1<template>
2  <vue-progress-bar shape="line" ref="line" :options="options"></vue-progress-bar>
3</template>
4
5<script>
6  export default {
7    data: {
8      options: {
9        color: '#007AFF',
10        strokeWidth: 0.5
11      }
12    },
13    mounted: function () {
14      this.$refs.line.animate(1.0)
15    }
16  }
17</script>
18
19<style>
20  html, body {
21    margin: 0;
22    padding: 0;
23  }
24</style>

ProgressBar component attributes

type: type of path line, circle, semiCircle, path

options: Options for path drawing.

1{
2  // Stroke color.
3  // Default: '#555'
4  color: '#3a3a3a',
5
6  // Width of the stroke.
7  // Unit is percentage of SVG canvas' size.
8  // Default: 1.0
9  // NOTE: In Line shape, you should control
10  // the stroke width by setting container's height.
11  // WARNING: IE doesn't support values over 6, see this bug:
12  //          https://github.com/kimmobrunfeldt/progressbar.js/issues/79
13  strokeWidth: 2.1,
14
15  // If trail options are not defined, trail won't be drawn
16
17  // Color for lighter trail stroke
18  // underneath the actual progress path.
19  // Default: '#eee'
20  trailColor: '#f4f4f4',
21
22  // Width of the trail stroke. Trail is always centered relative to
23  // actual progress path.
24  // Default: same as strokeWidth
25  trailWidth: 0.8,
26
27  // Inline CSS styles for the created SVG element
28  // Set null to disable all default styles.
29  // You can disable individual defaults by setting them to `null`
30  // If you specify anything in this object, none of the default styles
31  // apply
32  svgStyle: {
33    display: 'block',
34
35    // Important: make sure that your container has same
36    // aspect ratio as the SVG canvas. See SVG canvas sizes above.
37    width: '100%'
38  },
39
40  // Text options. Text element is a <p> element appended to container
41  // You can add CSS rules for the text element with the className
42  // NOTE: When text is set, 'position: relative' will be set to the
43  // container for centering. You can also prevent all default inline
44  // styles with 'text.style: null'
45  // Default: null
46  text: {
47    // Initial value for text.
48    // Default: null
49    value: 'Text',
50
51    // Class name for text element.
52    // Default: 'progressbar-text'
53    className: 'progressbar__label',
54
55    // Inline CSS styles for the text element.
56    // If you want to modify all CSS your self, set null to disable
57    // all default styles.
58    // If the style option contains values, container is automatically
59    // set to position: relative. You can disable behavior this with
60    // autoStyleContainer: false
61    // If you specify anything in this object, none of the default styles
62    // apply
63    // Default: object speficied below
64    style: {
65      // Text color.
66      // Default: same as stroke color (options.color)
67      color: '#f00',
68      position: 'absolute',
69      left: '50%',
70      top: '50%',
71      padding: 0,
72      margin: 0,
73      // You can specify styles which will be browser prefixed
74      transform: {
75          prefix: true,
76          value: 'translate(-50%, -50%)'
77      }
78    },
79
80    // Only effective if the text.style is not null
81    // By default position: relative is applied to container if text
82    // is set. Setting this to false disables that feature.
83    autoStyleContainer: true,
84
85    // Only effective if the shape is SemiCircle.
86    // If true, baseline for text is aligned with bottom of
87    // the SVG canvas. If false, bottom line of SVG canvas
88    // is in the center of text.
89    // Default: true
90    alignToBottom: true
91  },
92
93  // Fill color for the shape. If null, no fill.
94  // Default: null
95  fill: 'rgba(0, 0, 0, 0.5)',
96
97  // Duration for animation in milliseconds
98  // Default: 800
99  duration: 1200,
100
101  // Easing for animation. See #easing section.
102  // Default: 'linear'
103  easing: 'easeOut',
104
105  // See #custom-animations section
106  // Built-in shape passes reference to itself and a custom attachment
107  // object to step function
108  from: { color: '#eee' },
109  to: { color: '#000' },
110  step: function(state, circle, attachment) {
111    circle.path.setAttribute('stroke', state.color);
112  },
113
114  // If true, some useful console.warn calls will be done if it seems
115  // that progressbar is used incorrectly
116  // Default: false
117  warnings: false
118}

ProgressBar vm methods

svg()

Reference to SVG element where progress bar is drawn.

path()

Reference to SVG path which presents the actual progress bar.

trail()

Reference to SVG path which presents the trail of the progress bar. Returns null if trail is not defined.

text()

Reference to p element which presents the text label for progress bar. Returns null if text is not defined.

animate(progress, [options], [callback])

Animates drawing of a shape.

• progress: progress from 0 to 1.
• options: Animation options. These options override the defaults given in initialization.

1{
2  // Duration for animation in milliseconds
3  // Default: 800
4  duration: 1200,
5
6  // Easing for animation. See #easing section.
7  // Default: 'linear'
8  easing: 'easeInOut',
9
10  // See #custom-animations section
11  // Built-in shape passes reference to itself and a custom attachment
12  // object to step function
13  from: { color: '#eee' },
14  to: { color: '#000' },
15  step: function(state, circle, attachment) {
16      circle.path.setAttribute('stroke', state.color);
17  }
18}

• callback: Callback function which is called after animation ends.

set(progress)

Sets progress instantly without animation. Clears all animations for path.

stop()

Stops animation to its current position.

value()

Returns current shown progress from 0 to 1. This value changes when animation is running.

setText(text)

Sets text to given a string. If you need to dynamically modify the text element, see .text attribute.

More...

This depends on this project progressbar.js

for more API info, please check out their Docs.