akryum / vue-progress-path

Progress bars and loading indicators for Vue.js

vue-progress-path

Progress bars and loading indicators that can take any form!

This library is Work In Progress.

Live Demo

Sponsors

Gold

Silver

Bronze

Installation

npm i -S vue-progress-path

yarn add vue-progress-path

Usage

import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'

Vue.use(VueProgress, {
  // defaultShape: 'circle',
})

You can now use the <loading-progress> component.

CSS customization example

You can customize the progress components with CSS:

.vue-progress-path path {
  stroke-width: 12;
}

.vue-progress-path .progress {
  stroke: red;
}

.vue-progress-path .background {
  stroke: #edd;
}

Examples

Google Material Design-like spinner:

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  size="64"
  rotate
  fillDuration="2"
  rotationDuration="1"
/>

Semi-circle:

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  shape="semicircle"
  size="64"
/>

Custom SVG path:

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  shape="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
  size="180"
  fill-duration="2"
/>

vue-progress-path's Issues

Scaling to a parent container

Is there any way to set the size of the progress item to fill the parent container? Looks like only absolute values are supported, while the scenario I have requires setting the width and height to 100%

Build fail

on npm install

src/index.js → dist/vue-progress-path.min.js...
[!] (vue plugin) Error: Unknown transform 'collections'
src/components/Progress.vue
Error: Unknown transform 'collections'
    at error (vue-progress-path/node_modules/rollup/dist/rollup.js:185:14)
    at Promise.resolve.then.catch.err (vue-progress-path/node_modules/rollup/dist/rollup.js:9510:6)

It doesn't work in IE. Needs to be transpiled to ES5

Object.assign is not transpiled to ES5. Maybe babel can't do it properly.

https://babeljs.io/docs/plugins/transform-object-assign/

Changing Color With CSS

In the docs you show the css we can use to change the look of the loading bar, I added the classes and tried to use them with the loading progress component but nothing changed. Could you please post an example on how to change the color?

Innappropriate stroke dasharray length

When complex shapes are put in the path attribute, the automatic stroke-dasharray length is much too long, which causes each iteration to have a lot of downtime(time when the dash isn't looping)

Component doesn't animate, just draws a solid black shape

followed instructions, just renders a solid black shape, no animation regardless of progress/indeterminate passed in to model.

Gradient and rounded options

I've implemented gradients in my project, will you consider a pull request?

                  <vue-progress-path
                    :progress="score"
                    :hide-background="true"
                    shape="line"
                    size="200"
                    width="200"
                    height="6"
                    :gradient="[{ offset: 0, color: '#25BA00'}, { offset: 30, color: '#FFC000'}, { offset: 100, color: '#FF0000'}]"
                  />

Adding CSS Class to loader

I'm interested to know how to add multiple progress loaders on a component with different stroke colors. I'm running into issues adding my own stroke color to each of them.

I'm looking to do something like this

.vue-progress-path .progress-one {
  stroke: red;
}
.vue-progress-path .progress-two {
  stroke: blue;
}
.vue-progress-path .progress-three {
  stroke: green;
}

When can we get support for Vue 3?

Flicker on load, wrong svg size

I've noticed two issues with the component that prevent me from using this on a project. I'm using the following settings:

<loading-progress
    :progress=".5"
    size="26"
/>

1. There is a flicker on initial page load using Chrome. The svg fill starts out at 100% on load then goes to the set progress (50% in this case). I noticed this even on the demo page (https://akryum.github.io/vue-progress-path/).

2. The SVG size doesn't match the size specified (26px). Instead it's 76px. The path is the correct size, but the SVG is too large, resulting in a lot of whitespace. I see in the source code where 50px is being added to the SVG size. That should be removed or should be configurable.