vpc
vue-progressbar-component
npm i vue-progressbar-component
vpc

vue-progressbar-component

[CSS GPU Animation] Simple progressbar for vuejs

by EvodiaAut

1.1.0 (see all)License:MITTypeScript:Not Found
npm i vue-progressbar-component
Readme

vue-progressbar-component

[CSS GPU Animation] Simple progressbar for vuejs

npm license npm

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

<!-- add class (color) -->
<progress-bar
  :value="88"
  bar-class="bg-success"
/>

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

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

CSS

// example or use it
@import "./node_modules/vue-progressbar-component/src/scss/progressbar";

Do you like my theme but not the colors or paddings, ...?

// overwrite variables
$progressbar-height: 2rem;
$progressbar-background: gray;
// find more variables in /src/scss/_progressbar-variables.scss

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

Props

PropTypeRequiredDefaultDescription
valueNumberfalse0Progress bar width
barClassStringfalse''Bar class
originStringfalseleftSet origin
scaleStringfalseXSet 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
npm run unit

# run all tests
npm test

Downloads/wk

128

GitHub Stars

13

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.1.0
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate