https://github.com/Akryum/vue-progress-path

Progress bars and loading indicators for Vue.js
https://github.com/Akryum/vue-progress-path

loading-bar loading-spinner spinner vuejs vuejs2

Last synced: 4 months ago
JSON representation

Progress bars and loading indicators for Vue.js

• Host: GitHub
• URL: https://github.com/Akryum/vue-progress-path
• Owner: Akryum
• Created: 2017-09-22T17:16:30.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T09:24:07.000Z (about 3 years ago)
• Last Synced: 2024-10-29T22:32:34.252Z (about 1 year ago)
• Topics: loading-bar, loading-spinner, spinner, vuejs, vuejs2
• Language: Vue
• Homepage: https://akryum.github.io/vue-progress-path/
• Size: 698 KB
• Stars: 423
• Watchers: 11
• Forks: 37
• Open Issues: 45
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-vue - vue-progress-path - Progress bars and loading indicators for Vue.js ` 📝 2 years ago` (UI Components [🔝](#readme))
• awesome-vue-zh - Vue正在进行的路径 - 可自定义的进度指示器和支持任何自定义SVG路径的微调器. (UI组件 / 装载机)
• awesome-vue - vue-progress-path - Customizable progress indicators and spinners that support any custom SVG path. (Components & Libraries / UI Components)
• awesome-vue - vue-progress-path ★157 - Customizable progress indicators and spinners that support any custom SVG path. (UI Components / Loader)
• awesome-vue - vue-progress-path - Customizable progress indicators and spinners that support any custom SVG path. (UI Components / Loader)

README

          
# 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/)



  

    

  



## Sponsors

### Gold



  

    

  



### Silver



  

    

  

  

    

  



### Bronze



  

    

  

  

    

  



## 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

```

Semi-circle:

```html

```

Custom SVG path:

```html

```