{"id":18772273,"url":"https://github.com/teobais/percircle","last_synced_at":"2026-04-04T13:02:41.167Z","repository":{"id":39341566,"uuid":"41644923","full_name":"teobais/percircle","owner":"teobais","description":":o: CSS percentage circle built with jQuery","archived":false,"fork":false,"pushed_at":"2023-03-02T02:28:22.000Z","size":10690,"stargazers_count":224,"open_issues_count":17,"forks_count":67,"subscribers_count":10,"default_branch":"master","last_synced_at":"2026-04-01T06:51:27.682Z","etag":null,"topics":["circle","css","css-percentage-circle","javascript","jquery","jquery-plugin","percent","percentage-bar","percentage-circle","percentage-progress-circle","progress-bar","progress-circle"],"latest_commit_sha":null,"homepage":"https://teobais.github.io/percircle/","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/teobais.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2015-08-30T22:19:13.000Z","updated_at":"2026-03-07T18:49:55.000Z","dependencies_parsed_at":"2023-02-07T00:02:07.620Z","dependency_job_id":"2bb2b239-1d4e-4e85-8ebd-1c074299c48b","html_url":"https://github.com/teobais/percircle","commit_stats":{"total_commits":190,"total_committers":14,"mean_commits":"13.571428571428571","dds":0.3421052631578947,"last_synced_commit":"9d2283278bb050a3ca9f336e65084c47adb6536d"},"previous_names":["toubou91/percircle"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/teobais/percircle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teobais%2Fpercircle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teobais%2Fpercircle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teobais%2Fpercircle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teobais%2Fpercircle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teobais","download_url":"https://codeload.github.com/teobais/percircle/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teobais%2Fpercircle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31400460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["circle","css","css-percentage-circle","javascript","jquery","jquery-plugin","percent","percentage-bar","percentage-circle","percentage-progress-circle","progress-bar","progress-circle"],"created_at":"2024-11-07T19:28:22.864Z","updated_at":"2026-04-04T13:02:41.135Z","avatar_url":"https://github.com/teobais.png","language":"JavaScript","readme":"# percircle\r\n\u003e CSS percentage circle built with jQuery\r\n\r\n# [Demo](https://teobais.github.io/percircle)\r\n\r\n\r\n\u003e ## [Maintainers Wanted!](https://github.com/teobais/percircle/issues/43)\r\n---\r\n\r\n### Custom circles\r\n```html\r\n\u003cdiv id=\"custom\" class=\"yellow big\"\u003e\u003c/div\u003e \r\n\u003cdiv id=\"clock\" class=\"purple big\"\u003e\u003c/div\u003e\r\n\u003cdiv id=\"custom-color\" class=\"big\"\u003e\u003c/div\u003e\r\n\u003cdiv id=\"countdown\" class=\"big\"\u003e\u003c/div\u003e\r\n```\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg  src=\"_img/custom2.PNG\" alt=\"Custom\" /\u003e\r\n\u003c/p\u003e\r\n\u003chr\u003e\r\n\r\n### Update value dynamically\r\n\r\n#### Declare your html\r\n\r\n```html\r\n\u003cdiv class=\"clearfix\"\u003e\r\n    \u003cdiv id=\"redBecomesBlue\" class=\"red big\"\u003e\u003c/div\u003e\r\n\u003c/div\u003e\r\n\u003ca href=\"javascript:void(0);\" id=\"changeCircle\"\u003eFill Circle to 95.5\u003c/a\u003e\r\n```\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg  src=\"_img/update-value-dynamically.gif\" alt=\"Big blue circle\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Handle the click in the script\r\n```js\r\n$(document).ready(function(){\r\n    $(\"#redBecomesBlue\").percircle({percent: 25,text: \"25\"});\r\n    $('#changeCircle').click(function(e){\r\n        e.preventDefault();\r\n        changeCircle();\r\n    });\r\n});\r\n\r\nfunction changeCircle(){\r\n    $(\"#redBecomesBlue\").percircle({text:''});\r\n    $(\"#redBecomesBlue\").percircle({\r\n        text: \"\",\r\n        percent: 95.5,\r\n        progressBarColor: \"#1252c0\"\r\n    });\r\n}\r\n```\r\n\u003chr/\u003e\r\n\r\n# Usage\r\n\r\n#### 1. Load the module to your page\r\n```html\r\n\u003c!DOCTYPE HTML\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n  \u003cscript src=\"../bower_components/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e\r\n  \u003cscript type=\"text/javascript\" src=\"../dist/js/percircle.js\"\u003e\u003c/script\u003e\r\n  \u003clink rel=\"stylesheet\" href=\"../dist/css/percircle.css\"\u003e\r\n\u003c/head\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n#### 2. Define the circle objects\r\nBig blue circle marked with a percent of 50%:\r\n```html\r\n\u003cdiv id=\"bluecircle\" data-percent=\"17\" class=\"big\"\u003e\r\n\u003c/div\u003e\r\n```\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg  src=\"_img/big_blue_17.gif\" alt=\"Big blue circle\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### 3. Let the script get the job done\r\n```html\r\n\u003cscript type=\"text/javascript\"\u003e\r\n    $(function(){\r\n        $(\"#bluecircle\").percircle();\r\n    });\r\n\u003c/script\u003e\r\n```\r\n\u003chr\u003e\r\n\r\n### npm\r\nPercircle is registered as an npm package and can be installed with:\r\n```\r\nnpm install percircle\r\n```\r\n\r\n### Bower\r\nPercircle is also registered as a Bower package, so it can be pulled down using:\r\n```\r\nbower install percircle\r\n```\r\n\r\n\u003chr/\u003e\r\n\r\n### Options\r\n| Option | Description | via configuration object | via data attribute | Default |\r\n| -- | -- | -- | -- | -- |\r\n| Animate | Whether to animate the progress bar on load (or view) | `{ animate: \"true\" }` | data-animate=\"true\" | true |\r\n| Clock | Display a clock in the percircle | `{ perclock: true}` | data-perclock=\"true\" | false |\r\n| Countdown | Display a countdown in the percircle | `{ perdown: true}` | data-perdown=\"true\" | false |\r\n| Countdown seconds | The amount of seconds to countdown. | `{ secs: 15 }` | data-secs=\"15\" | - |\r\n| Countdown time up text | Text to display when countdown has completed.\t| `{ timeUpText: 'Complete!' }` | data-timeUpText=\"Complete!\" | - |\r\n| Countdown reset on click | Whether to reset the countdown on percircle click | `{ reset: true }` | data-reset=\"true\" | false \r\n| Display text at zero | Whether to display text even when the percentage is 0 | `{ displayTextAtZero: true }` | n/a | false |\r\n| Progress bar color | The colour of the progress bar | `{ progressBarColor: '#6188ff' }` | data-progressBarColor=\"#6188ff\" | empty (inherit from class or css) |\r\n| Text | Text to display inside the percirle | `{ percent: 65 }` | data-percent=\"65\" | undefined (use percent value) |\r\n\r\n\u003chr/\u003e\r\n\r\n### Building Percircle Locally\r\n\r\nIf you'd like to run the development version, `percircle` uses Webpack to handle build tasks like bundling and minification.\r\nFirst, clone the repository, then run:\r\n\r\n    # Install the dependencies\r\n    npm install\r\n\r\n    # Launch webpack dev server, whilst watching for any js or css changes \r\n    npm start\r\n\r\n### Contribute\r\nContributions are more than welcome. Please ensure that you spent some time reading our [Contributor's Guidelines](https://github.com/teobais/percircle/blob/master/CONTRIBUTING.md).\r\n\r\n### Contributors\r\n[\u003cimg alt=\"teobais\" src=\"https://avatars2.githubusercontent.com/u/5684688?v=4\u0026s=117 width=117\"\u003e](https://github.com/teobais) |[\u003cimg alt=\"chrisahardie\" src=\"https://avatars0.githubusercontent.com/u/2429373?v=4\u0026s=117 width=117\"\u003e](https://github.com/chrisahardie) |[\u003cimg alt=\"chris--jones\" src=\"https://avatars0.githubusercontent.com/u/10459377?v=4\u0026s=117 width=117\"\u003e](https://github.com/chris--jones) |[\u003cimg alt=\"tinglu\" src=\"https://avatars0.githubusercontent.com/u/1032258?v=4\u0026s=117 width=117\"\u003e](https://github.com/tinglu) |[\u003cimg alt=\"tranthanhhoa\" src=\"https://avatars0.githubusercontent.com/u/6691878?v=4\u0026s=117 width=117\"\u003e](https://github.com/tranthanhhoa) |[\u003cimg alt=\"ahmadajmi\" src=\"https://avatars1.githubusercontent.com/u/626005?v=4\u0026s=117 width=117\"\u003e](https://github.com/ahmadajmi) |[\u003cimg alt=\"Sylphony\" src=\"https://avatars3.githubusercontent.com/u/1796078?v=4\u0026s=117 width=117\"\u003e](https://github.com/Sylphony) |[\u003cimg alt=\"yireo\" src=\"https://avatars0.githubusercontent.com/u/1373981?v=4\u0026s=117 width=117\"\u003e](https://github.com/yireo) | [\u003cimg alt=\"miller-kevin\" src=\"https://avatars.githubusercontent.com/u/50149901?v=4\u0026s=117 width=117\"\u003e](https://github.com/miller-kevin)\r\n:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\r\n[teobais](https://github.com/teobais)|[chrisahardie](https://github.com/chrisahardie)|[chris--jones](https://github.com/chris--jones)|[tinglu](https://github.com/tinglu)|[tranthanhhoa](https://github.com/tranthanhhoa)|[ahmadajmi](https://github.com/ahmadajmi)|[Sylphony](https://github.com/Sylphony)|[yireo](https://github.com/yireo)|[miller-kevin](https://github.com/miller-kevin)|\r\n\r\n### Credits\r\nThe original project was created from \u003ca href=\"http://circle.firchow.net/\" target=\"_blank\"\u003eAndre Firchow\u003c/a\u003e and as I didn't find any similar here, I uploaded it.\r\n\r\nHowever, the project loaded all the css transformations, in the \u003ccode\u003epercircle.css\u003c/code\u003e file. Now, it uses jQuery to apply repeated functionality where needed.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteobais%2Fpercircle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteobais%2Fpercircle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteobais%2Fpercircle/lists"}