vue-ellipse-progress

A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of this plugin is to combine the best properties of other available libraries and to add unique features, delivered in a simple to use component with friendly interface.

With the available options you can create simple circles very quickly. But playing with the combinations of props and with a bit of imagination you can create really exciting things.

View Demo View Github

Usage

Install the library via npm:

npm i vue-ellipse-progress

The component is provided as a Vue.js plugin. So just initialize it in your main.js:

import VueEllipseProgress from 'vue-ellipse-progress';

Vue.use(VueEllipseProgress);

// Vue.use(VueEllipseProgress, "vep"); you can define a name and use the plugin like <vep/>

Js

Now use the component:

<vue-ellipse-progress 
  :data="circles"                    
  :progress="progress"
  :angle="-90"
  color="blue"
  :colorFill="colorFillGradient"
  emptyColor="#8ec5fc"
  :emptyColorFill="emptyColorFillGradient"                      
  :size="300"
  :thickness="10"
  emptyThickness="10%"
  lineMode="in 10"
  :legend="true"
  :legendValue="180"
  legendClass="legend-custom-style"
  dash="60 0.9"
  animation="reverse 700 400"
  :noData="false"
  :loading="false"                      
  fontColor="white"
  :half="false"
  :gap="10"
  dot="10 blue"
  fontSize="5rem">

  <span slot="legend-value">/200</span>
  <p slot="legend-caption">GOOD JOB</p>

</vue-ellipse-progress>

#progress #circle #vue #vue.js #programming