{"id":13552952,"url":"https://github.com/dreambo8563/easy-circular-progress","last_synced_at":"2025-04-09T08:12:17.516Z","repository":{"id":55907247,"uuid":"182818699","full_name":"dreambo8563/easy-circular-progress","owner":"dreambo8563","description":"easy circular progress component with counting effect 💫🏺🎡","archived":false,"fork":false,"pushed_at":"2020-12-08T04:34:15.000Z","size":1653,"stargazers_count":120,"open_issues_count":12,"forks_count":22,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T05:09:23.583Z","etag":null,"topics":["circular-progress-bar","countdown","theme","vue"],"latest_commit_sha":null,"homepage":"https://dreambo8563.github.io/easy-circular-progress/","language":"HTML","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/dreambo8563.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-22T15:45:14.000Z","updated_at":"2024-12-04T11:33:42.000Z","dependencies_parsed_at":"2022-08-15T09:10:27.315Z","dependency_job_id":null,"html_url":"https://github.com/dreambo8563/easy-circular-progress","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Feasy-circular-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Feasy-circular-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Feasy-circular-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Feasy-circular-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreambo8563","download_url":"https://codeload.github.com/dreambo8563/easy-circular-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999864,"owners_count":21031046,"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":["circular-progress-bar","countdown","theme","vue"],"created_at":"2024-08-01T12:02:13.956Z","updated_at":"2025-04-09T08:12:17.496Z","avatar_url":"https://github.com/dreambo8563.png","language":"HTML","funding_links":[],"categories":["UI Components [🔝](#readme)","HTML","Components \u0026 Libraries","UI Components"],"sub_categories":["UI Components","Loader"],"readme":"[![Codacy Badge](https://api.codacy.com/project/badge/Grade/9d5901431eb1423192c2ace8bd5064d3)](https://app.codacy.com/app/dreambo8563/easy-circular-progress?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=dreambo8563/easy-circular-progress\u0026utm_campaign=Badge_Grade_Dashboard)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n[![codecov](https://codecov.io/gh/dreambo8563/easy-circular-progress/branch/master/graph/badge.svg)](https://codecov.io/gh/dreambo8563/easy-circular-progress)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n![npm](https://img.shields.io/npm/dt/easy-circular-progress.svg?style=flat)\n[![Build Status](https://travis-ci.com/dreambo8563/easy-circular-progress.svg?branch=master)](https://travis-ci.com/dreambo8563/easy-circular-progress)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Feasy-circular-progress.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Feasy-circular-progress?ref=badge_shield)\n[![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/easy-circular-progress.svg)](https://greenkeeper.io/)\n[![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/easy-circular-progress/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/easy-circular-progress?targetFile=package.json)\n\n# easy-circular-progress\n\n## Install\n\n```\nnpm install easy-circular-progress --save\n```\n\n### Quick Start\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cProgress value=\"16.88\"\u003e\n      \u003c!-- \u003ctemplate v-slot:footer\u003e\n        \u003cb\u003egoood\u003c/b\u003e\n      \u003c/template\u003e--\u003e\n    \u003c/Progress\u003e\n    \u003cProgress strokeColor=\"#FF00AA\" value=\"16.88\"\u003e\n      \u003ctemplate v-slot:footer\u003e\n        \u003cb\u003eMore Color\u003c/b\u003e\n      \u003c/template\u003e\n    \u003c/Progress\u003e\n\n    \u003cProgress :radius=\"50\" :strokeWidth=\"10\" value=\"86.12\"\u003e\n      \u003ctemplate v-slot:footer\u003e\n        \u003cb\u003eBolder \u0026 Bigger One\u003c/b\u003e\n      \u003c/template\u003e\n    \u003c/Progress\u003e\n\n    \u003cProgress\n      :transitionDuration=\"5000\"\n      :radius=\"50\"\n      :strokeWidth=\"10\"\n      value=\"86.12\"\n    \u003e\n      \u003ctemplate v-slot:footer\u003e\n        \u003cb\u003eSlow One\u003c/b\u003e\n      \u003c/template\u003e\n    \u003c/Progress\u003e\n\n    \u003cProgress\n      :transitionDuration=\"5000\"\n      :radius=\"55\"\n      :strokeWidth=\"10\"\n      value=\"86.12567\"\n    \u003e\n      \u003ctemplate v-slot:footer\u003e\n        \u003cb\u003eMore Precise\u003c/b\u003e\n      \u003c/template\u003e\n    \u003c/Progress\u003e\n\n    \u003cProgress :transitionDuration=\"5000\" :radius=\"55\" :strokeWidth=\"10\" value=\"86.12567\"\u003e\n      \u003cdiv class=\"content\"\u003ehello\u003c/div\u003e\n      \u003ctemplate v-slot:footer\u003e\n        \u003cb\u003eMore Precise\u003c/b\u003e\n      \u003c/template\u003e\n    \u003c/Progress\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Progress from \"easy-circular-progress\";\n\nexport default {\n  name: \"app\",\n  components: {\n    Progress\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\"\u003e\n#app {\n  font-family: \"Avenir\", Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  height: 100vh;\n  color: #fff;\n  background: #3e423a;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\nbody {\n  margin: 0;\n  padding: 0;\n}\n\u003c/style\u003e\n\n```\n\n### Prop Types\n\n| Property           | Type             | Required? | Description                                                           |\n| :----------------- | :--------------- | :-------- | :-------------------------------------------------------------------- |\n| strokeWidth        | Number           |           | default is 4, the width of the progress circle, the bigger the bolder |\n| radius             | Number           |           | the inner circle radius, default is 38                                |\n| transitionDuration | Number           |           | default is 1000, transitionDuration for the animation                 |\n| strokeColors       | String           |           | default is \"#aaff00\"                                                  |\n| value              | Number \\| String |           | default is 0.0, should be less or equal then 100                      |\n\n### Slot\n\n| Slot Name | Description                         |\n| :-------- | ----------------------------------- |\n| footer    | we can add a footer for the circle  |\n| default   | the content displayed in the circle |\n\n\u003e if default slot provided, the coutdown effect will be ignored.\n\n### Advance Guide\n\n#### Customized Theme\n\n- In your customized scss file (demo.scss)\n\n```scss\n$--circular-progress-int-fz: 28px;\n$--circular-progress-dec-fz: 12px;\n@import '~easy-circular-progress/src/index';\n```\n\n- import the scss to override the default theme in main.js (entry file) before you import the Draw component\n\n```js\nimport './demo.scss';\n```\n\n\u003e variables\n\nWe split the number into two parts (int, dec)\nWe can define the font-size for each part\n\n- \\$--circular-progress-int-fz: 28px;\n- \\$--circular-progress-dec-fz: 12px;\n\n#### Possibly Polyfill\n\n```js\nNumber.isNaN =\n  Number.isNaN ||\n  function(value) {\n    return value !== value;\n  };\n```\n\n## License\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-circular-progress.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-circular-progress?ref=badge_large)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://dreambo8563.github.io/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6948318?v=4\" width=\"100px;\" alt=\"Vincent Guo\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVincent Guo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dreambo8563/vue-circular-progress/commits?author=dreambo8563\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/dreambo8563/vue-circular-progress/commits?author=dreambo8563\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-dreambo8563\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Feasy-circular-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreambo8563%2Feasy-circular-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Feasy-circular-progress/lists"}