Awesome
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"/>
<div align="center" style="text-align: center;"> <img src="https://github.com/setaman/Bilder/blob/master/vue-ellipse-demo.gif" alt="Component demo"> </div>[!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.
Quick start
Install via npm:
npm i vue-ellipse-progress@next
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