{"id":13717242,"url":"https://github.com/setaman/vue-ellipse-progress","last_synced_at":"2025-05-15T01:04:18.924Z","repository":{"id":39505271,"uuid":"178721751","full_name":"setaman/vue-ellipse-progress","owner":"setaman","description":"A Vue.js component to create beautiful animated circular progress bars","archived":false,"fork":false,"pushed_at":"2025-04-05T15:00:49.000Z","size":2656,"stargazers_count":357,"open_issues_count":2,"forks_count":38,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-06T18:13:05.582Z","etag":null,"topics":["bar","circle","half-circle","progress","vue-plugin","vue3","vuejs2"],"latest_commit_sha":null,"homepage":"https://setaman.github.io/vue-ellipse-progress-docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/setaman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-31T17:45:57.000Z","updated_at":"2025-04-03T12:57:05.000Z","dependencies_parsed_at":"2023-02-06T01:15:40.641Z","dependency_job_id":"184d46d6-28b0-4081-9f54-3fa05702fd94","html_url":"https://github.com/setaman/vue-ellipse-progress","commit_stats":{"total_commits":775,"total_committers":3,"mean_commits":258.3333333333333,"dds":0.002580645161290307,"last_synced_commit":"820054c1322d1f62b0f5d10853b1cf06778be5e6"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setaman%2Fvue-ellipse-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setaman%2Fvue-ellipse-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setaman%2Fvue-ellipse-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/setaman%2Fvue-ellipse-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/setaman","download_url":"https://codeload.github.com/setaman/vue-ellipse-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248785051,"owners_count":21161223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bar","circle","half-circle","progress","vue-plugin","vue3","vuejs2"],"created_at":"2024-08-03T00:01:19.773Z","updated_at":"2025-04-13T21:29:20.527Z","avatar_url":"https://github.com/setaman.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)","JavaScript"],"sub_categories":["UI Components"],"readme":"# vue-ellipse-progress\n[![NPM Version](https://img.shields.io/npm/v/vue-ellipse-progress?style=for-the-badge\u0026color=success)](https://www.npmjs.com/package/vue-ellipse-progress)\n![GitHub](https://img.shields.io/github/license/setaman/vue-ellipse-progress?style=for-the-badge)\n![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/setaman/vue-ellipse-progress/build.yml?style=for-the-badge)\n\nA dependency-free, simple, flexible and smooth Vue.js plugin to create beautiful circle progress bars, \nimplemented with SVG.\nFollow these three steps to get started:\n```js\n// install\nnpm i vue-ellipse-progress\n// initialize\nimport veProgress from \"vue-ellipse-progress\";\ncreateApp(App).use(veProgress);\n// use\n\u003cve-progress :progress=\"50\"/\u003e\n```\n\u003e [!TIP]\n\u003e Dive into the [documentation ](https://setaman.github.io/vue-ellipse-progress-docs/) to \n\u003e get more information about the installation, usage, and configuration of the plugin.\n\u003e Explore a wide range of interactive examples showcasing various styles, animations, and use cases.\n\n- [Installation](https://setaman.github.io/vue-ellipse-progress-docs/guide/installation.html)\n- [Usage](https://setaman.github.io/vue-ellipse-progress-docs/guide/usage.html)\n- [Configuration](https://setaman.github.io/vue-ellipse-progress-docs/guide/options/)\n- [Compatibility](https://setaman.github.io/vue-ellipse-progress-docs/guide/compatibility.html)\n- [Development](https://setaman.github.io/vue-ellipse-progress-docs/guide/development.html)\n- [Contributing](https://setaman.github.io/vue-ellipse-progress-docs/guide/contribution.html)\n\n\u003cdiv align=\"center\" style=\"text-align: center;\"\u003e\n  \u003cimg src=\"https://github.com/setaman/Bilder/blob/master/vue-ellipse-demo.gif\" alt=\"Component demo\"\u003e  \n\u003c/div\u003e\n\n## Quick start\n\nInstall via npm:\n```\nnpm i vue-ellipse-progress\n```\n\nImport and initialize the component in your `main.js`. After initialization, the component is available as `\u003cve-progress/\u003e`.\n```js\nimport { createApp } from \"vue\";\nimport veProgress from \"vue-ellipse-progress\";\ncreateApp(App).use(veProgress);\n```\nYou also have the option to import the component directly:\n```js\nimport { VeProgress } from \"vue-ellipse-progress\";\n```\n\n### CDN\nTo 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).\nJust add the following line to your HTML and initialize the component as plugin:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-ellipse-progress/dist/veprogress.umd.min.js\"\u003e\u003c/script\u003e\n...\ncreateApp(App).use(veprogress);\n```\n\n## Development\n\nThe development always happens in `dev` branch. You'll find all the latest updates there. \n`dev` will only be merged into the master when all unit tests have been passed, builds are successful, \ndocumentation is updated, and functionality is verified on the [documentation ](https://setaman.github.io/vue-ellipse-progress-docs/). \nBefore all that, changes remain in beta.\n\n#### Run for local development\nThe project was initialized with Vue CLI. Execute the following commands to start development locally:\n```\nnpm i\nnpm run serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsetaman%2Fvue-ellipse-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsetaman%2Fvue-ellipse-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsetaman%2Fvue-ellipse-progress/lists"}