vue-ellipse-progress

vue-ellipse-progress

A Vue.js component to create beautiful animated circular progress bars

How to use

install the library via npm

npm i -S 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);

Now use the component

<vue-ellipse-progress
  :progress="progress"
  :angle="-90"
  color="blue"
  :colorFill="colorFillGradient"
  emptyColor="#8ec5fc"
  :emptyColorFill="emptyColorFillGradient"
  :size="300"
  :thickness="10"
  emptyThickness="10%"
  :lineMode="{mode: 'in', offset: 10}"
  :legend="true"
  :legendValue="180"
  legendClass="legend-custom-style"
  :dash="{count: 60, spacing: 0.9}"
  :animation="{type: 'reverse', duration: 700, delay: 400}"
  :noData="false"
  :loading="false"
  fontColor="white"
  :half="false"
  fontSize="5rem">

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

</vue-ellipse-progress>

Options

Actually you are ready to go with only following line:

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

The progress is the only one 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