vue2-progress-bar

A linear progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient.
1,934 1
vue components progress bar
Install
npm install vue2-progress-bar
Latest Version:0.1.1
Vue:2
License:MIT
Last Updated:Dec 13, 2022
Links: GitHub  ·  npm
Maintainer: dana_cm

vue2-progress-bar npm package

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

Related Packages

@ctechhindi/vue3-progress-bar

A infinite progress bar for vue 3

876 1
progress bar vue progress-bar vue3
vue-circle-counter

Vue compoment to create a circular counter or progress bar in SVG

5,305 16
progress bar vue circle counter svg
vue-pithy-progress

Progress bar component for Vue.js(2.x). This project contains three common compo...

2,099
progress bar vue circle progress progress semi circle progress
@bprogress/vue

Utility to create your own NProgress bar like with Vue

9,835 739
progress bar vue bprogress nprogress vue bprogress vue nprogress vue progress
vue-js-progress

With Vue Js Progress, you will have the opportunity to create your own animated...

3,051
progress bar vue bar bootstrap percentage progress progressbar vue.js

Version History

Version Released Vue License
0.1.1 ^2.6.11 MIT
0.1.0 ^2.6.11 MIT