https://github.com/setaman/vue-ellipse-progress

A Vue.js component to create beautiful animated circular progress bars
https://github.com/setaman/vue-ellipse-progress

bar circle half-circle progress vue-plugin vue3 vuejs2

Last synced: 25 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/setaman/vue-ellipse-progress
• Owner: setaman
• License: mit
• Created: 2019-03-31T17:45:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-03T17:15:50.000Z (about 1 month ago)
• Last Synced: 2024-10-03T17:20:13.201Z (about 1 month ago)
• Topics: bar, circle, half-circle, progress, vue-plugin, vue3, vuejs2
• Language: JavaScript
• Homepage: https://vue-ellipse-progress-demo.netlify.app
• Size: 2.55 MB
• Stars: 356
• Watchers: 6
• Forks: 38
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-loading-indicators - vue-ellipse-progress - A Vue.js component to create beautiful animated circular progress bars ([Demo](https://vue-ellipse-progress-demo.netlify.com/)). (JavaScript)

README

        
# vue-ellipse-progress

[![NPM Version](https://img.shields.io/npm/v/vue-ellipse-progress?style=for-the-badge&color=success)](https://www.npmjs.com/package/vue-ellipse-progress)

![GitHub](https://img.shields.io/github/license/setaman/vue-ellipse-progress?style=for-the-badge)

![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/setaman/vue-ellipse-progress/build.yml?style=for-the-badge)

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:

```js

// install

npm i vue-ellipse-progress

// initialize

import veProgress from "vue-ellipse-progress";

createApp(App).use(veProgress);

// use

```

> [!TIP]

> Dive into the [documentation ](https://setaman.github.io/vue-ellipse-progress-docs/) 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](https://setaman.github.io/vue-ellipse-progress-docs/guide/installation.html)

- [Usage](https://setaman.github.io/vue-ellipse-progress-docs/guide/usage.html)

- [Configuration](https://setaman.github.io/vue-ellipse-progress-docs/guide/options/)

- [Compatibility](https://setaman.github.io/vue-ellipse-progress-docs/guide/compatibility.html)

- [Development](https://setaman.github.io/vue-ellipse-progress-docs/guide/development.html)

- [Contributing](https://setaman.github.io/vue-ellipse-progress-docs/guide/contribution.html)



    



## 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 ``.

```js

import { createApp } from "vue";

import veProgress from "vue-ellipse-progress";

createApp(App).use(veProgress);

```

You also have the option to import the component directly:

```js

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](https://www.jsdelivr.com/package/npm/vue-ellipse-progress).

Just add the following line to your HTML and initialize the component as plugin:

```html

...

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 ](https://setaman.github.io/vue-ellipse-progress-docs/). 

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

```