August 17, 2022

A Vue.js Component To Draw Animated Circular Progress Bars

vue-circular-progress is a small Vue.js component for drawing animated circular progress bars with or without percentage text.

animated circular progress bar, circular progress bar react native, circular progress bar with percentage, circular progress bar javascript

How to make use of it:

Install

// For Vue.js 2.0+
npm install vue2-circle-progress

Usage

<template>
  <div id="app">
    <p>
      A Vue.js component to draw animated circular progress bars!
    </p>
      <vue-circle
        :progress="50"
        :size="100"
        :reverse="false"
        line-cap="round"
        :fill="fill"
        empty-fill="rgba(0, 0, 0, .1)"
        :animation-start-value="0.0"
        :start-angle="0"
        insert-mode="append"
        :thickness="5"
        :show-percent="true"
        @vue-circle-progress="progress"
        @vue-circle-end="progress_end">
          <p>Slot!</p>
      </vue-circle>
  </div>
</template>
<script>
  import VueCircle from 'vue2-circle-progress'
  export default {
    components: {
      VueCircle
    },
    data(){
      return{
        fill : { gradient: ["red", "green", "blue"] },
      }
    },
    methods:{
      progress(event,progress,stepValue){
        console.log(stepValue);
      },
      progress_end(event){
        console.log("Circle progress end");
      }
    }
  }
</script>

Events

Events are emitted by the component to the parent.

Event NameDescription
vue-circle-init(event)This event is emitted after the circle is initialized
vue-circle-progress(event,progress,stepValue)This event is emitted on every progress step
vue-circle-end(event)This event is emitted after completing the progress

Methods

Methods you can call on the component.

MethodDescription
updateProgress(value)It will update the component progress value and animate the change. It doesn’t redraw the widget.
updateFill(fill)It will update the component fill color.

animated circular progress bar, vue-circle-progress Plugin/Github


See Demo And Download

 

Official Website(vrajroham): Click Here

This superior jQuery/javascript plugin is developed by vrajroham. For extra advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.