vue-progress-path
Progress bars and loading indicators that can take any form!
This library is Work In Progress.
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"
/>
![[security] chore(deps-dev): bump clean-css from 4.1.9 to 4.2.3](https://avatars.githubusercontent.com/in/2141?v=4)
109 Dec 15, 2022
1 Aug 3, 2020
5 Oct 20, 2022
2.9k Dec 30, 2022
0 Sep 1, 2020
2k Jan 9, 2023
14 Dec 17, 2020
7 Nov 27, 2022
470 Dec 19, 2022
113 Dec 22, 2022
13 Jun 9, 2022
8 Apr 30, 2021
57 Apr 6, 2022
1.1k Jan 3, 2023
319 Dec 27, 2022
88 Dec 9, 2022
39 Dec 10, 2022
140 Dec 18, 2022
759 Nov 29, 2022