vue-progress-path


Progress bars and loading indicators that can take any form!

> This library is Work In Progress.

Live Demo

Installation

``
npm i -S vue-progress-path
`

`
yarn add vue-progress-path
`

Usage

`js
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 component.

CSS customization example

You can customize the progress components with CSS:

`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:

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

Semi-circle:

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

Custom SVG path:

`html
: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"
/>
``