Package Exports

vue-progressbar-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-progressbar-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-progressbar-component

Simple progressbar for vuejs

Demo

Demo here

Install

npm install vue-progressbar-component or yarn add vue-progressbar-component

Usage

The most common use case is to register the component globally.

// in your main.js or similar file
import Vue from 'vue'
import ProgressBar from 'vue-progressbar-component'

Vue.component('progress-bar', ProgressBar)

Alternatively you can do this to register the components:

// HelloWorld.vue
import ProgressBar from 'vue-progressbar-component'

export default {
  name: 'HelloWorld',
  components: {
    ProgressBar
  }
}

On your page you can now use html like this:

<!-- simple progress bar -->
<progress-bar :value="77"></progress-bar>

<!-- change start origin from right-->
<progress-bar :value="95" origin="right"></progress-bar>

<!-- change scaleX to scaleY and origin bottom-->
<progress-bar :value="88" scale="Y" origin="bottom"></progress-bar>

CSS

// simple theme
@import "./node_modules/vue-progressbar-component/src/scss/progressbar";

Props

Prop	Type	Required	Sync	Default	Description
value	Number	false	false	0	Progress bar (width) from 0 to 100
origin	String	false	false	left	Set origin
scale	String	false	false	X	Set scaleX or scaleY

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
#[SOON] npm run unit

# run e2e tests
#[SOON] npm run e2e

# run all tests
#[SOON] npm test