vue-ellipse-progress
v2.2.0
Published
A Vue.js component to create beautiful animated circle progress bars
Downloads
33,400
Maintainers
Readme
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.
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