{"id":13717182,"url":"https://github.com/kottenator/jquery-circle-progress","last_synced_at":"2025-05-15T07:05:06.381Z","repository":{"id":19964918,"uuid":"23231854","full_name":"kottenator/jquery-circle-progress","owner":"kottenator","description":"jQuery Plugin to draw animated circular progress bars","archived":false,"fork":false,"pushed_at":"2018-07-11T05:08:31.000Z","size":131,"stargazers_count":1094,"open_issues_count":33,"forks_count":310,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-04-14T11:11:35.524Z","etag":null,"topics":["animation","circle","javascript","jquery","jquery-plugin"],"latest_commit_sha":null,"homepage":"http://kottenator.github.io/jquery-circle-progress/","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/kottenator.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":"2014-08-22T16:27:25.000Z","updated_at":"2025-04-02T11:19:16.000Z","dependencies_parsed_at":"2022-09-09T12:10:18.909Z","dependency_job_id":null,"html_url":"https://github.com/kottenator/jquery-circle-progress","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fjquery-circle-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fjquery-circle-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fjquery-circle-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kottenator%2Fjquery-circle-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kottenator","download_url":"https://codeload.github.com/kottenator/jquery-circle-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254150017,"owners_count":22022853,"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":["animation","circle","javascript","jquery","jquery-plugin"],"created_at":"2024-08-03T00:01:19.029Z","updated_at":"2025-05-15T07:05:01.372Z","avatar_url":"https://github.com/kottenator.png","language":"JavaScript","readme":"jquery-circle-progress\n======================\n\n[![Build status](https://travis-ci.org/kottenator/jquery-circle-progress.svg?branch=master)](https://travis-ci.org/kottenator/jquery-circle-progress)\n[![Bower version](https://img.shields.io/bower/v/jquery-circle-progress.svg?maxAge=3600)](https://bower.io/search/?q=jquery-circle-progress)\n[![NPM version](https://img.shields.io/npm/v/jquery-circle-progress.svg?maxAge=3600)](https://www.npmjs.com/package/jquery-circle-progress)\n\njQuery Plugin to draw animated circular progress bars like this:\n\n![](http://i.imgur.com/zV5VUQG.png)\n\nCheck out [more examples](http://kottenator.github.io/jquery-circle-progress/)! Or maybe the crazy [one](http://jsbin.com/vatuza/5/)?\n\nInstall\n-------\n\nMake your choice:\n\n* Download [latest GitHub release](https://github.com/kottenator/jquery-circle-progress/releases)\n* `bower install jquery-circle-progress`\n* `npm install jquery-circle-progress`\n\nUsage\n-----\n\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery-circle-progress/dist/circle-progress.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"circle\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  $('#circle').circleProgress({\n    value: 0.75,\n    size: 80,\n    fill: {\n      gradient: [\"red\", \"orange\"]\n    }\n  });\n\u003c/script\u003e\n```\n\nIf you use AMD or CommonJS with some JS bundler - see the [UMD section](#umd) below.\n\nOptions\n-------\n\nSpecify options like in example above.\n\n| Option | Description |\n| ---- | ---- |\n| **value** | This is the only required option. It should be from `0.0` to `1.0` \u003cbr\u003e Default: `0` |\n| size | Size of the circle / canvas in pixels \u003cbr\u003e Default: `100` |\n| startAngle | Initial angle (for `0` value) \u003cbr\u003e Default: `-Math.PI` |\n| reverse | Reverse animation and arc draw \u003cbr\u003e Default: `false` |\n| thickness | Width of the arc. By default it's automatically calculated as 1/14 of `size` but you may set your own number \u003cbr\u003e Default: `\"auto\"` |\n| lineCap | Arc line cap: `\"butt\"`, `\"round\"` or `\"square\"` - [read more](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap) \u003cbr\u003e Default: `\"butt\"`\n| fill | The arc fill config. You may specify next:  \u003cbr\u003e- `\"#ff1e41\"` \u003cbr\u003e- `{ color: \"#ff1e41\" }` \u003cbr\u003e- `{ color: 'rgba(255, 255, 255, .3)' }` \u003cbr\u003e- `{ gradient: [\"red\", \"green\", \"blue\"] }` \u003cbr\u003e- `{ gradient: [[\"red\", .2], [\"green\", .3], [\"blue\", .8]] }` \u003cbr\u003e- `{ gradient: [ ... ], gradientAngle: Math.PI / 4 }` \u003cbr\u003e- `{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }` \u003cbr\u003e- `{ image: \"http://i.imgur.com/pT0i89v.png\" }`\u003cbr\u003e- `{ image: imageInstance }`\u003cbr\u003e- `{ color: \"lime\", image: \"http://i.imgur.com/pT0i89v.png\" }` \u003cbr\u003e Default: `{ gradient: [\"#3aeabb\", \"#fdd250\"] }` |\n| emptyFill | Color of the \"empty\" arc. Only a color fill supported by now \u003cbr\u003e Default: `\"rgba(0, 0, 0, .1)\"` |\n| animation | Animation config. See [jQuery animations](http://api.jquery.com/animate/). \u003cbr\u003e You may also set it to `false` \u003cbr\u003e Default: `{ duration: 1200, easing: \"circleProgressEasing\" }`  \u003cbr\u003e `\"circleProgressEasing\"` *is just a ease-in-out-cubic easing* |\n| animationStartValue | Default animation starts at `0.0` and ends at specified `value`. Let's call this direct animation. If you want to make reversed animation then you should set `animationStartValue` to `1.0`. Also you may specify any other value from `0.0` to `1.0` \u003cbr\u003e Default: `0.0`\n| insertMode | Canvas insertion mode: append or prepend it into the parent element? \u003cbr\u003e Default: `\"prepend\"` |\n\nFrom version `1.1.3` you can specify any config option as HTML `data-` attribute.\n\nIt will work *only on init*, i.e. after the widget is inited you may update its properties only via `.circleProgress({/*...*/})` method. `data-` attributes will be ignored.\n\nAlso, object options like `\"fill\"` or `\"animation\"` should be valid JSON (and don't forget about HTML-escaping):\n\n```html\n\u003cdiv\n  class=\"circle\"\n  data-value=\"0.9\"\n  data-size=\"60\"\n  data-thickness=\"20\"\n  data-animation-start-value=\"1.0\"\n  data-fill=\"{\n    \u0026quot;color\u0026quot;: \u0026quot;rgba(0, 0, 0, .3)\u0026quot;,\n    \u0026quot;image\u0026quot;: \u0026quot;http://i.imgur.com/pT0i89v.png\u0026quot;\n  }\"\n  data-reverse=\"true\"\n\u003e\u003c/div\u003e\n```\n\nEvents\n------\n\n| Event | Description | Handler |\n| ---- | ---- | ---- |\n| `circle-inited` | Triggered on init or re-init. | `function(event)`: \u003cbr\u003e- `event` - jQuery event |\n| `circle-animation-start` | Triggered once the animation is started. | `function(event)`: \u003cbr\u003e- `event` - jQuery event |\n| `circle-animation-progress` | Triggered on each [animation tick](http://api.jquery.com/animate/#step). | `function(event, animationProgress, stepValue)`: \u003cbr\u003e- `event` - jQuery event \u003cbr\u003e- `animationProgress` - from `0.0` to `1.0` \u003cbr\u003e- `stepValue` - current step value: from `0.0` to `value` |\n| `circle-animation-end` | Triggered once the animation is finished. | `function(event)`: \u003cbr\u003e- `event` - jQuery event |\n\nBrowsers support\n----------------\n\nThe library uses `\u003ccanvas\u003e` which is supported by all modern browsers *(including mobile browsers)*\nand Internet Explorer 9+ ([Can I Use](http://caniuse.com/#search=canvas)).\n\nI haven't implemented any fallback / polyfill for unsupported browsers yet\n*(i.e. for Internet Explorer 8 and older / misc browsers)*.\n\nUMD\n---\n\nI use [UMD template for jQuery plugin](https://github.com/umdjs/umd/blob/d31bb6ee7098715e019f52bdfe27b3e4bfd2b97e/templates/jqueryPlugin.js) which combines three things:\n\n* works fine with _browser globals_\n* works fine with AMD\n* works fine with CommonJS\n\n### Browser globals\n\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery-circle-progress/dist/circle-progress.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  $('#circle').circleProgress({\n    value: 0.75,\n  });\n\u003c/script\u003e\n```\n\n### AMD\n\nAssuming that you have `jquery`, `jquery-circle-progress` and `requirejs` in `libs/` directory:\n\n```html\n\u003cscript src=\"libs/requirejs/require.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  requirejs.config({\n    paths: {\n      'jquery': 'libs/jquery/dist/jquery', // 'jquery' path is required - 'jquery-circle-progress' requires it\n      'jquery-circle-progress': 'libs/jquery-circle-progress/dist/circle-progress' // and this one is for your convenience\n    }\n  });\n  requirejs(['jquery', 'jquery-circle-progress'], function($) {\n    $('#circle').circleProgress({\n      value: 0.75\n    });\n  });\n\u003c/script\u003e\n```\n\nYou can [configure RequireJS](http://requirejs.org/docs/api.html) as you wish, just make `'jquery'` dependency reachable.\n\n### CommonJS\n\n```js\n// script.js\nrequire('jquery-circle-progress');\nvar $ = require('jquery');\n$('#circle').circleProgress({\n  value: 0.75\n});\n```\n\n```sh\nsome-js-bundler \u003c script.js \u003e script.bundle.js\n```\n\n```html\n\u003cscript src=\"script.bundle.js\"\u003e\u003c/script\u003e\n```\n\nYou can use any JS bundler ([Webpack](https://webpack.github.io/), [Browserify](http://browserify.org/), etc) - no specific configuration required.\n\nAPI\n---\n\n### Get/set value\n\nGet it:\n\n```js\n$('.circle').circleProgress({ value: 0.5 });\nvar value = $('.circle').circleProgress('value'); // 0.5\n```\n\nIt will return the *first* item's value (by *first* I mean when `$('.circle').length \u003e= 1`).\n*It works only if the widget is already inited. Raises an error otherwise*.\n\nSet it:\n\n```js\n$('.circle').circleProgress('value', 0.75); // set value to 0.75 \u0026 animate the change\n```\n\nIt will update *all* selected items value and animate the change.\nIt doesn't *redraw* the widget - it updates the value \u0026 animates the changes.\nFor example, it may be an AJAX loading indicator, which shows the loading progress.\n\n### Get `\u003ccanvas\u003e`\n\n```js\n$('.circle').circleProgress({ value: 0.5 });\nvar canvas = $('.circle').circleProgress('widget');\n```\n\nIt will return the *first* item's `\u003ccanvas\u003e` (by *first* I mean when `$('.circle').length \u003e= 1`).\n*It works only if the widget is already inited. Raises an error otherwise*.\n\n### Get `CircleProgress` instance\n\n```js\nvar instance = $('#circle').data('circle-progress');\n```\n\n### Redraw existing circle\n\n```js\n$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});\n$('#circle').circleProgress('redraw'); // use current configuration and redraw\n$('#circle').circleProgress(); // alias for 'redraw'\n$('#circle').circleProgress({ size: 150 }); // set new size and redraw\n```\n\n*It works only if the widget is already inited. Raises an error otherwise*.\n\n### Change default options\n\n```js\n$.circleProgress.defaults.size = 50;\n```\n\nFAQ\n---\n\n\u003cdl\u003e\n\u003cdt\u003eHow to start the animation only when the circle appears in browser's view (on scrolling)?\n\u003cdd\u003eHere is \u003ca href=\"https://github.com/kottenator/jquery-circle-progress/issues/8\"\u003emy proposed solution\u003c/a\u003e.\n\u003cdt\u003eHow to make the size flexible?\n\u003cdd\u003eE.g. for responsive design, you can do it \u003ca href=\"https://github.com/kottenator/jquery-circle-progress/issues/17\"\u003ein the following way\u003c/a\u003e.\n\u003cdt\u003eWhat if I need it to run in IE8?\n\u003cdd\u003eThere is no full-feature support for IE8 (actually, I didn't imlpement IE8 support at all). But you may follow \u003ca href=\"https://github.com/kottenator/jquery-circle-progress/issues/35\"\u003emy recommendations\u003c/a\u003e.\n\u003cdt\u003eHow to stop the animation?\n\u003cdd\u003eHere is \u003ca href=\"https://github.com/kottenator/jquery-circle-progress/issues/37\"\u003ewhat you can do\u003c/a\u003e.\n\u003cdt\u003eCan I handle \"click\" event?\n\u003cdd\u003eIt's not in the \"core\" but you can use \u003ca href=\"http://output.jsbin.com/fetequ/5\"\u003emy example of mouse/touch events handling\u003c/a\u003e.\n\u003cdt\u003eMay I customize the shape somehow?\n\u003cdd\u003eIt's a bit \"tricky\" but possible. Here is \u003ca href=\"https://github.com/kottenator/jquery-circle-progress/wiki/Custom-layouts\"\u003emy little collection\u003c/a\u003e.\n\u003c/dl\u003e\n\nDevelopment\n-----------\n\n### Install\n\n```sh\ngit clone git@github.com:kottenator/jquery-circle-progress.git\nnpm install\n```\n\n### Modify\n\nYou need to update `dist/circle-progress.min.js` after any change to `dist/circle-progress.js`:\n \n```sh\nnpm run build-min\n```\n\nIf you're using one of JetBrains IDEs - you can configure a File Watcher.\nIt's also possible to use some CLI tool like [Watchman](https://facebook.github.io/watchman/).\n\n### Test\n\n```sh\nnpm test\n```\n\nSauceLabs:\n\n```sh\nexport SAUCE_USERNAME=...\nexport SAUCE_ACCESS_KEY=...\nexport BUILD_NUMBER=...\nnpm test -- karma-saucelabs.conf.js\n```\n\n### Build docs\n\nThe API docs are not complete yet but you can build them:\n\n```sh\nnpm run build-docs\n```\n\nThey will be generated in `docs/api/`.\n\n### Release new version\n\n* finalize the code\n* update the version in `package.json`, `bower.json` and `dist/circle-progress.js` docstring\n* update min dist: `npm run build-min`\n* update `docs/index.html` - link to the latest dist version _(which doesn't exist yet)_\n* push the changes to `master` branch\n* release on Bower: just create a Git tag (e.g.): `git tag v1.2.3 \u0026\u0026 git push --tags`\n* release on GitHub - add release notes to the Git tag\n* release on NPM: `npm publish`, but be aware:\n  \n  \u003e Once a package is published with a given name and version, that specific name and version combination can never be used again - [NPM docs](https://docs.npmjs.com/cli/publish)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkottenator%2Fjquery-circle-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkottenator%2Fjquery-circle-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkottenator%2Fjquery-circle-progress/lists"}