vue2-progress-bar

A linear progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient.

Live Demo

Requirements

• Vue.js ^2.0.0 (Compatible with Vue 1.0 or 2.0)
• A module bundler such as webpack or use the minified version on its own.

Installation

$ npm install --save vue2-progress-bar

Usage

<template>
  <progress-bar
    :diameter="200"
    :completed-steps="completedSteps"
    :total-steps="totalSteps"
  >
    <template v-slot:header>this is header slot </template>
    <template v-slot:footer> this is footer slot</template>
    <template v-slot:tip> {{(completedSteps/totalSteps)*100}}%</template>
  </progress-bar>
</template>
 
<script>
  import ProgressBar from "vue2-progress-bar";
 
  export default {
    data() {
      return {
        completedSteps: 0,
        totalSteps: 10
      };
    },
    components: {
      ProgressBar
    }
  };
</script> 

Props

Name	Default value	Description
height	10	Height of the progress bar in pixels.
width	10	Width of the progress bar in pixels.
totalSteps	10	Total number of steps to complete progress bar.
completedSteps	0	Number of completed steps in the progress bar.
startColor	#73cbfe	The color of the leading edge of the progress bar gradient.
stopColor	#458efd	The secondary color of the progress bar gradient.
innerStrokeColor	#d6efff	Background color of the progress bar.
strokeLinecap	round	The type of stroke linecap for circle.
animateSpeed	1000	The amount of time in milliseconds to animate one step.
timingFunc	linear	The transition timing function to use for the CSS transition. See transition-timing-function.
showTip	true	Show tip text after the progress bar.

Slot

Name	Default value	Description
header	null	header slot of the progress bar .
footer	null	footer slot of the progress bar.
tip	completedSteps/totalSteps	tip content slot after the progress bar.

Dev

npm run dev

📒 ChangeLog

ChangeLog

License

The MIT License