vue-ellipse-progress

vue-ellipse-progress

A Vue.js component 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 uniqe features, delivered in a simple to use compnent with friendly interface.

:grey_exclamation: Live interactive DEMO here :grey_exclamation:

Usage

Install the library via npm

npm i vue-ellipse-progress

The library 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/>

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"                    
  fontSize="5rem">
  
  <span slot="legend-value">/200</span>
  <p slot="legend-caption">GOOD JOB</p>
  
</vue-ellipse-progress>

Options

You are ready to go with just following line:

<vue-ellipse-progress :progress="progress"/>

The progress is the only required property. However, in order to created unique circles that match your design needs, you can use all the properties explained in the documentation on github.

:heavy_exclamation_mark:

PLEASE READ THE DOCUMENTATION ON GITHUB