Progress bars and loading indicators that can take any form!
This library is Work In Progress.
VueSchool logo Vue Mastery logo
npm i -S vue-progress-path
yarn add vue-progress-path
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.
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; }
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" />