vue-progressbar-component

[CSS GPU Animation] 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" />  <!-- 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

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