{"id":24501041,"url":"https://github.com/thomasdev-de/jquery-bs-circle-progress","last_synced_at":"2026-05-22T05:20:06.578Z","repository":{"id":217627162,"uuid":"744016453","full_name":"ThomasDev-de/jquery-bs-circle-progress","owner":"ThomasDev-de","description":"The plugin displays a process in the form of a circle using Bootstrap and jQuery.","archived":false,"fork":false,"pushed_at":"2024-01-19T08:23:56.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T22:28:26.979Z","etag":null,"topics":["bootstrap","circle","jquery","jquery-plugin","nocss","progress-bar"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThomasDev-de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-16T13:19:35.000Z","updated_at":"2024-01-18T12:49:49.000Z","dependencies_parsed_at":"2024-01-18T16:43:15.776Z","dependency_job_id":null,"html_url":"https://github.com/ThomasDev-de/jquery-bs-circle-progress","commit_stats":null,"previous_names":["thomasdev-de/jquery-bs-circle-progress"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-circle-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-circle-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-circle-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-bs-circle-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasDev-de","download_url":"https://codeload.github.com/ThomasDev-de/jquery-bs-circle-progress/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243697697,"owners_count":20332996,"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":["bootstrap","circle","jquery","jquery-plugin","nocss","progress-bar"],"created_at":"2025-01-21T22:22:58.539Z","updated_at":"2026-05-22T05:20:01.557Z","avatar_url":"https://github.com/ThomasDev-de.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-bs-circle-progress\n\nThe plugin displays a process in the form of a circle using Bootstrap and jQuery.\n\n## Requirements\n\n- Bootstrap \u003e= v4.0.0 (Works with Bootstrap 5.x)\n- jQuery \u003e= 1.9\n\n## Installing\n\n### Manual\n\nDownload the compressed file jquery-bs-circle-progress.min.js from the dist folder.\nUpload it to your project and include it before the \u003c/body\u003e tag but after the jQuery script.\n\n```html\n\n\u003cscript src=\"path/to/jquery/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/twbs/bootstrap/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/jquery-bs-circle-progress.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    // custom scripts\n\u003c/script\u003e\n\u003c/body\u003e\n```\n\n### Manual\n\n```shell\ncomposer require webcito/jquery-bs-circle-progress:dev-main\n```\n\n### Usage\n\n#### html\n\n```html\n\n\u003cdiv id=\"my_first_progress\"\u003e\u003c/div\u003e\n```\n\n#### javascript\n\n```js\n $('#my_first_progress').circleProgress();\n```\n\nThat's it!\n\n## Plugin options\n\n| prop          | type   | default       | description                                                                                                                |\n|---------------|--------|---------------|----------------------------------------------------------------------------------------------------------------------------|\n| size          | number | 200           | The size of the circle                                                                                                     |\n| value         | number | 0             | The predefined value of progress                                                                                           |             \n| color         | string | 'primary'     | The color of the progress. It can be a bootstrap class ('primary', 'secondary', etc.) or a CSS property (rgb(20,20,20)).   |\n| background    | string | 'transparent' | The color of the background. It can be a bootstrap class ('primary', 'secondary', etc.) or a CSS property (rgb(20,20,20)). |\n| progressWidth | number | null          | The thickness of the progress bar. If no value is specified, the thickness is calculated automatically using the circle.   |\n\n### example\n\n```js\n $('selector').circleProgress({\n    size: 350,\n    value: 12,\n    color: '#506886'\n});\n```\n\n## Plugin methods\n\n| method        | params | description                                |\n|---------------|--------|--------------------------------------------|\n| val           | number | Changes the value of progress              |\n| updateOptions | object | Rebuilds the plugin using the new options. |\n\n### example\n\n```js\n $('selector').circleProgress({\n    size: 350,\n    value: 12,\n    color: '#506886'\n});\n\nlet seconds = 0;\nlet testInterval = null;\ntestInterval = setInterval(function () {\n    if (seconds === 100) {\n        clearInterval(testInterval)\n    }\n    let color;\n    switch (true) {\n        case seconds \u003c 20:\n            color = 'danger';\n            break;\n        case seconds \u003c 40:\n            color = 'warning';\n            break;\n        case seconds \u003c 60:\n            color = 'info';\n            break;\n        case seconds \u003c 80:\n            color = 'primary';\n            break;\n        default:\n            color = 'success';\n            break;\n    }\n    $('selector').circleProgress('updateOptions', {\n        value: seconds,\n        color: color\n    });\n    seconds++;\n}, 100)\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fjquery-bs-circle-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasdev-de%2Fjquery-bs-circle-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fjquery-bs-circle-progress/lists"}