{"id":17082271,"url":"https://github.com/jairoblatt/vue3-radial-progress","last_synced_at":"2025-10-30T01:31:59.301Z","repository":{"id":43904071,"uuid":"427431647","full_name":"jairoblatt/vue3-radial-progress","owner":"jairoblatt","description":"🐋 A smart and lightweight radial progress component for Vue 3.","archived":false,"fork":false,"pushed_at":"2022-10-03T23:41:14.000Z","size":555,"stargazers_count":25,"open_issues_count":3,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-16T04:39:07.024Z","etag":null,"topics":["component","javascript","lib","progress-bar","radial-gradient","svg-animations","typescript","vue3"],"latest_commit_sha":null,"homepage":"vue3-radial-progress.vercel.app","language":"Vue","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/jairoblatt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-12T16:48:04.000Z","updated_at":"2024-08-14T17:44:48.000Z","dependencies_parsed_at":"2022-09-15T00:22:17.177Z","dependency_job_id":null,"html_url":"https://github.com/jairoblatt/vue3-radial-progress","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jairoblatt%2Fvue3-radial-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jairoblatt%2Fvue3-radial-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jairoblatt%2Fvue3-radial-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jairoblatt%2Fvue3-radial-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jairoblatt","download_url":"https://codeload.github.com/jairoblatt/vue3-radial-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238921069,"owners_count":19552678,"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":["component","javascript","lib","progress-bar","radial-gradient","svg-animations","typescript","vue3"],"created_at":"2024-10-14T13:00:24.035Z","updated_at":"2025-10-30T01:31:58.940Z","avatar_url":"https://github.com/jairoblatt.png","language":"Vue","funding_links":[],"categories":["Recently Updated","Components \u0026 Libraries"],"sub_categories":["[Oct 14, 2024](/content/2024/10/14/README.md)","UI Components"],"readme":"\u003cimg src=\"https://github.com/jairoblatt/vue3-radial-progress/blob/master/demo/src/assets/demo-1.png\" alt=\"Demo\"\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-0aa8d2\" alt=\"MIT\"/\u003e\n\u003cimg src=\"https://badge.fury.io/js/vue3-radial-progress.svg\" alt=\"npm version\" height=\"18\"\u003e\n  \u003cimg src=\"https://snyk.io/test/github/jairoblatt/vue-material-tabs/badge.svg\" alt=\"Vulnerabilities\"\u003e\n  \u003cp \u003eA smart and light radial progress bar component for Vue 3.\u003c/p\u003e\n  \u003cbr/\u003e\n\u003c/div\u003e\n\n\u003e[The original project](https://github.com/wyzantinc/vue-radial-progress) only works with Vue 1 and 2, so I decided to rewrite it for Vue 3.\n\n### [Live Demo](https://vue3-radial-progress.vercel.app/)\n\n\n\n## 🚚 Install\n\n```d\n yarn add vue3-radial-progress  // npm install --save vue3-radial-progress\n```\n\n## 🚀 Usage\n\n### Global\n\n```javascript\nimport { createApp } from 'vue';\nimport RadialProgress from \"vue3-radial-progress\";\n\nconst app = createApp(App); \napp.use(RadialProgress);\n\n```\n\n### Local\n\n```javascript\nimport RadialProgress from \"vue3-radial-progress\";\n\nexport default {\n  components: {\n    RadialProgress\n  },\n};\n```\n\n## 📌 Examples\n\n```html\n\u003ctemplate\u003e\n  \u003cRadialProgress \n   :diameter=\"200\"\n   :completed-steps=\"completedSteps\"\n   :total-steps=\"totalSteps\"\u003e\n    \u003c!-- Your inner content here --\u003e\n  \u003c/RadialProgress\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ref, defineComponent } from \"vue\";\n\nexport default defineComponent({\n    setup(){\n      const completedSteps = ref(0);\n      const totalSteps = ref(10);\n\n      return {\n            completedSteps,\n            totalSteps\n        }\n    }\n})\n\u003c/script\u003e\n```\n\n### Props\n\n| Name          | type             | Default   | description                                       |\n| ------------- | ---------------- | --------- | ------------------------------------------------- |\n|`diameter`| number | 200 | Sets width/diameter of the inner stroke.\n|`totalSteps`| number |10|  Sets the total steps/progress to the end.\n|`completedSteps`| number |0|  Sets the current progress of the inner stroke.\n|`startColor`| string |'#00C58E'|  Sets the start color of the inner stroke (gradient).\n|`stopColor`| string |'#00E0A1'|  Sets the end color of the inner stroke (gradient).\n|`innerStrokeColor`| string |'#2F495E'| Sets the color of the inner stroke to be applied to the shape.\n|`strokeWidth`| number |10| Sets the width of the stroke to be applied to the shape. see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n|`innerStrokeWidth`| number |10| Sets the  width of the inner stroke to be applied to the shape.\n|`strokeLinecap`| string |'round'| Sets the shape to be used at the end of stroked. see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n|`animateSpeed`| number |1000| Sets how long the animation should take to complete one cycle. see: https://www.w3schools.com/cssref/css3_pr_animation-duration.asp\n|`fps`| number |60 | Sets the frames per seconds to update inner stroke animation.\n|`timingFunc`| string |'linear'| Sets how the animation progresses through the duration of each cycle. see: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function\n|`isClockwise`| boolean |true| Sets the inner stroke direction.\n\n### Slots\n\n| Name | Description                |\n| ---- | -------------------------- |\n| default | Sets the default slot inner the radial progress   |\n\n## 🔖 License\n\n[MIT](https://github.com/jairoblatt/vue3-radial-progress/blob/master/LICENSE)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjairoblatt%2Fvue3-radial-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjairoblatt%2Fvue3-radial-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjairoblatt%2Fvue3-radial-progress/lists"}