Have ideas to improve npm?Join in the discussion! »

    vue2-progress-bar

    0.1.1 • Public • Published

    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

    Install

    npm i vue2-progress-bar

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    403 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar