vue-ellipse-progress

A dependency-free, simple, flexible and smooth Vue.js plugin to create beautiful circle progress bars, implemented with SVG. Follow these three steps to get started:

// install
npm i vue-ellipse-progress
// initialize
import veProgress from "vue-ellipse-progress";
createApp(App).use(veProgress);
// use
<ve-progress :progress="50"/>

Tip

Dive into the documentation to get more information about the installation, usage, and configuration of the plugin. Explore a wide range of interactive examples showcasing various styles, animations, and use cases.

• Installation
• Usage
• Configuration
• Compatibility
• Development
• Contributing

Quick start

Install via npm:

npm i vue-ellipse-progress

Import and initialize the component in your main.js. After initialization, the component is available as <ve-progress/>.

import { createApp } from "vue";
import veProgress from "vue-ellipse-progress";
createApp(App).use(veProgress);

You also have the option to import the component directly:

import { VeProgress } from "vue-ellipse-progress";

CDN

To use the component without a build tool you can customize and get the veprogress.umd.min.js file from JSDelivr. Just add the following line to your HTML and initialize the component as plugin:

<script src="https://cdn.jsdelivr.net/npm/vue-ellipse-progress/dist/veprogress.umd.min.js"></script>
...
createApp(App).use(veprogress);

Development

The development always happens in dev branch. You'll find all the latest updates there. dev will only be merged into the master when all unit tests have been passed, builds are successful, documentation is updated, and functionality is verified on the documentation . Before all that, changes remain in beta.

Run for local development

The project was initialized with Vue CLI. Execute the following commands to start development locally:

npm i
npm run serve