Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 2 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 (over 6 years ago)
Default Branch: master
Last Pushed: 2022-12-07T09:24:07.000Z (over 1 year ago)
Last Synced: 2024-03-23T22:41:06.770Z (2 months ago)
Topics: loading-bar, loading-spinner, spinner, vuejs, vuejs2
Language: Vue
Homepage: https://akryum.github.io/vue-progress-path/
Size: 698 KB
Stars: 420
Watchers: 11
Forks: 38
Open Issues: 46
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Lists

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 - Customizable progress indicators and spinners that support any custom SVG path. (Components & Libraries / UI Components)
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 - Customizable progress indicators and spinners that support any custom SVG path. (Components & Libraries / UI Components)
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 - Customizable progress indicators and spinners that support any custom SVG path. (Components & Libraries / UI Components)
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 - Customizable progress indicators and spinners that support any custom SVG path. (Components & Libraries / UI Components)
awesome-vue - vue-progress-path - Customizable progress indicators and spinners that support any custom SVG path. (UI Components / Loader)
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)
awesome-vue. - vue-progress-path - 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)
awesome-vue - vue-progress-path - 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)
awesome-vue - vue-progress-path - Customizable progress indicators and spinners that support any custom SVG path. (Components & Libraries / UI Components)
awesome-vuejs - vue-progress-path - 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. (Components & Libraries / UI Components)

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

```