@its-company/vue-split-progress-bar v1.0.2

vue-split-progress-bar

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

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

Setup

install:

npm install @its-company/vue-split-progress-bar --save

Import: (in your main.js)

import ProgressBar from '@its-company/vue-split-progress-bar'
Vue.use(ProgressBar)

Usage

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

<progress-bar
  :label="data.label"
  :max="200"
  :data="data.elementData"
/>

// variant 1
data: {
  label: "Risk of Loss",
  elementData: [
    {
      style: "low",
      name: "Low",
      value: 1,
    },
    {
      style: "middle",
      name: "Middle",
      value: 78,
    },
    {
      style: "high",
      name: "High",
      value: 120,
    },
  ],
}
// variant 2
data: {
  label: "Satisfaction",
  elementData: [
    {
      style: "low",
      name: "Low",
      value: 1,
    },
    {
      style: "middle",
      name: "Middle",
      value: 8,
    },
    {
      style: "high",
      name: "High",
      value: 10,
    },
  ],
}
// variant 3
data: {
  label: "Impact of Loss",
  elementData: [
    {
      style: "low",
      name: "Low",
      value: 40,
    },
    {
      style: "middle",
      name: "Middle",
      value: 144,
    },
    {
      style: "high",
      name: "High",
      value: 16,
    },
  ],
}
// variant 4
data: {
  elementData: [
    {
      style: "low",
      name: "Low",
      value: 140,
    },
    {
      style: "#bee5eb",
      name: "Middle",
      value: 40,
    },
    {
      style: "",
      name: "High",
      value: 16,
    },
  ],
}

Props

Properties