vuejs3-progressbar v2.0.1

vuejs3-progressbar

ProgressBar for vue.js version 3 SVG/Vector based 4 modes: Line, Circle, Cylinder and Battery v1.2.8

Requirements

Nodejs: v16.20.0 npm: v8.19.4

Live demo

Do you have questions or want a new feature? Use the "Issues" section :point_left:

Setup

install:

npm install vuejs3-progressbar --save

in your main.js

import ProgressBar from 'vuejs3-progressbar';
import {createApp} from "vue";
const app = createApp()
              .component(ProgressBar)

Usage

Use: (in your local .vue file/component, html section)

<progress-bar
  :options="options"
  :value="value"
/>

<!-- Options struct: -->
options: {
  text: {
    color: '#FFFFFF',
    shadowEnable: true,
    shadowColor: '#000000',
    fontSize: 14,
    fontFamily: 'Helvetica',
    dynamicPosition: false,
    hideText: false
  },
  progress: {
    color: '#2dbd2d',
    backgroundColor: '#333333',
    inverted: false
  },
  layout: {
    height: 35,
    width: 140,
    verticalTextAlign: 61,
    horizontalTextAlign: 43,
    zeroOffset: 0,
    strokeWidth: 30,
    progressPadding: 0,
    type: 'line'
  }
}

Properties