vue-ellipse-progress

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.

:grey_exclamation: Take a look at some interesting examples on the Demo page :grey_exclamation:

Installation

Use your package manager or CDN to install and initialize the component.

NPM

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

CDN

Use this option where you have a global Vue.js instance available. You can customize and get the bundled and minified component from JSDelivr. Just add the following line to your HTML and start using the component, nothing more is required:

<script src="https://cdn.jsdelivr.net/npm/vue-ellipse-progress/dist/vue-ellipse-progress.umd.min.js"></script>

Usage

After you have initialized the component, use it everywhere you want in your application:

<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"
  reverse
  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

Changelog

v2.0.0-alpha.5

13 December 2020

Merged

• V2 improve build #92

Commits (13)

⚠️Breaking Changes

• fix!: change plugin initialization 6c0391d
• fix!: short component name to ve-progress da8710a

✅ New Features

• feat: export component in the build f8d0ca7

📜 Misc

• chore: bump deps 73fadfa
• chore: bump deps acd25ad
• doc: update initialization guide 792657e
• doc: update CDN initialization guide 6b6bc8a
• doc: remove version notes badges 9ff8952
• chore: add codeclimate config 3f84fd7
• doc: update plugin initialization d40cad4
• doc: corrections 4a72146
• chore: update travis config c32ac14
• doc: update npm badge 038a7fb

---