GitXplorerGitXplorer
A

vue-progress-path

public
422 stars
36 forks
45 issues

Commits

List of commits on branch master.
Verified
08b3a4a584da4700237968359d80634c5d67b545

Create FUNDING.yml

AAkryum committed 5 years ago
Verified
6532e55314155225650842d4c0d1f904f1c6b967

chore: update sponsors

AAkryum committed 5 years ago
Unverified
4126024801f1940e16e1178905ea998e9e2a24a3

chore: update sponsors

committed 6 years ago
Unverified
e73f8fc87c360755315d6c44adb28c8e8571d18e

docs: update sponsors

committed 6 years ago
Unverified
fcddaf713e553ada2204de5cff36f254d7ce336f

chore: update sponsors

committed 6 years ago
Verified
22d051471e82ec22d8911a6447068f95d6ed8325

docs: update sponsors

AAkryum committed 6 years ago

README

The README file for this repository.

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