Home
Softono
vue-progress-path

vue-progress-path

Open source Vue
Website GitHub
421
Stars
38
Forks
45
Issues
10
Watchers
3 years
Last Commit
JavaScript Libraries & Components

About vue-progress-path

# vue-progress-path [![npm](https://img.shields.io/npm/v/vue-progress-path.svg) ![npm](https://img.shields.io/npm/dm/vue-progress-path.svg)](https://www.npmjs.com/package/vue-progress-path) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) Progress bars and loading indicators that can take any form! > This library is Work In Progress. [Live Demo](https://akryum.github.io/vue-progress-path/) <p> <a href="https://www.patreon.com/akryum" target="_blank"> <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon"> </a> </p> ## Sponsors ### Gold <p align="center"> <a href="https://www.sumcumo.com/en/" target="_blank"> <img src="https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png" alt="sum.cumo logo" width="400px"> </a> </p> ### Silver <p align="center"> <a href="https://vueschool.io/" target="_blank"> <img src="https://vueschool.io/img/logo/vueschool_logo_multicolor.svg ...

Platforms

Web Self-hosted

Languages

Vue

Links

Website Source Code
a
Published by
akryum
Visit View Profile

README.md

View on GitHub

vue-progress-path

npm npm vue2

Progress bars and loading indicators that can take any form!

This library is Work In Progress.

Live Demo

Become a Patreon

Sponsors

Gold

sum.cumo logo

Silver

VueSchool logo

Vue Mastery logo

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"
/>