PHPackages                             thatsus/jquery-circle-progress - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. thatsus/jquery-circle-progress

ActiveLibrary

thatsus/jquery-circle-progress
==============================

v1.1.4(10y ago)264.7k[1 issues](https://github.com/thatsus/jquery-circle-progress/issues)JavaScript

Since Aug 27Pushed 10y agoCompare

[ Source](https://github.com/thatsus/jquery-circle-progress)[ Packagist](https://packagist.org/packages/thatsus/jquery-circle-progress)[ RSS](/packages/thatsus-jquery-circle-progress/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

jquery-circle-progress
======================

[](#jquery-circle-progress)

[![Build Status](https://camo.githubusercontent.com/c591a3359e96ba6be7ab171291faccb05c2a4ca84d8d367c50b5d0b63d9e5a4c/68747470733a2f2f7472617669732d63692e6f72672f6b6f7474656e61746f722f6a71756572792d636972636c652d70726f67726573732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/kottenator/jquery-circle-progress)

jQuery Plugin to draw animated circular progress bars like this:

[![](https://camo.githubusercontent.com/a26eca315b1c1318179d90d5e989f554df3927ed93cff493982e2d58d0002ff7/687474703a2f2f692e696d6775722e636f6d2f7a5635565551472e706e67)](https://camo.githubusercontent.com/a26eca315b1c1318179d90d5e989f554df3927ed93cff493982e2d58d0002ff7/687474703a2f2f692e696d6775722e636f6d2f7a5635565551472e706e67)

Check out [more examples](http://kottenator.github.io/jquery-circle-progress/)! Or maybe the crazy [one](http://jsbin.com/vatuza/1/)?

Install
-------

[](#install)

Download [latest GitHub release](https://github.com/kottenator/jquery-circle-progress/releases)or `bower install jquery-circle-progress`

Usage
-----

[](#usage)

```

    $('#circle').circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
        }
    });

```

Options
-------

[](#options)

You should specify options like in usage example above.

| Option | Description | | ---- | ---- | ---- | | **value** | This is the only required option. It should be from `0.0` to `1.0`
 Default: `0` | | size | Size of the circle / canvas in pixels
 Default: `100` | | startAngle | Initial angle (for `0` value)
 Default: `-Math.PI` | | reverse | Reverse animation and arc draw
 Default: `false` | | thickness | Width of the arc. By default it's automatically calculated as 1/14 of `size` but you may set your own number
 Default: `"auto"` | | lineCap | Arc line cap: `"butt"`, `"round"` or `"square"` - [read more](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap)
 Default: `"butt"`| fill | The arc fill config. You may specify next:
\- `{ color: "#ff1e41" }`
\- `{ color: 'rgba(255, 255, 255, .3)' }`
\- `{ gradient: ["red", "green", "blue"] }`
\- `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }`
\- `{ gradient: [ ... ], gradientAngle: Math.PI / 4 }`
\- `{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }`
\- `{ image: "http://i.imgur.com/pT0i89v.png" }`
\- `{ image: imageInstance }`
\- `{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }`
 Default: `{ gradient: ["#3aeabb", "#fdd250"] }` | | emptyFill | Color of the "empty" arc. Only a color fill supported by now
 Default: `"rgba(0, 0, 0, .1)"` | | animation | Animation config. See [jQuery animations](http://api.jquery.com/animate/).
 You may also set it to `false`
 Default: `{ duration: 1200, easing: "circleProgressEase" }`
 `"circleProgressEase"` *is just a ease-in-out-cubic easing* | | 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`
 Default: `0.0`

From version `1.1.3` you can specify any config option as HTML `data-` attribute.

It 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.

Also, object options like `"fill"` or `"animation"` should be valid JSON (and don't forget about HTML-escaping):

```

```

Events
------

[](#events)

When animation is enabled, there are 3 events available:

EventHandler`circle-animation-start``function(event)`:
- `event` - jQuery event`circle-animation-progress``function(event, animationProgress, stepValue)`:
- `event` - jQuery event
- `animationProgress` - from `0.0` to `1.0`
- `stepValue` - current step value: from `0.0` to `value``circle-animation-end``function(event)`:
- `event` - jQuery eventBrowsers support
----------------

[](#browsers-support)

It uses `` which is supported by all modern browsers *(including mobile browsers)*and Internet Explorer 9+ ([Can I Use](http://caniuse.com/#search=canvas)).

I have not implemented any fallback / polyfill for unsupported browsers yet *(i.e. for Internet Explorer 8 and older / misc browsers)*.

API
---

[](#api)

#### Get/set value

[](#getset-value)

Get it:

```
$('.circle').circleProgress({ value: 0.5 });
var value = $('.circle').circleProgress('value'); // 0.5
```

It will return the *first* item's value (by *first* I mean when `$('.circle').length >= 1`). *It works only if the widget is already inited. Raises an error otherwise*.

Set it:

```
$('.circle').circleProgress('value', 0.75); // set value to 0.75 & animate the change
```

It will update *all* selected items value and animate the change. It doesn't *redraw* the widget - it updates the value & animates the changes. For example, it may be an AJAX loading indicator, which shows the loading progress.

#### Get ``

[](#get-canvas)

```
$('.circle').circleProgress({ value: 0.5 });
var canvas = $('.circle').circleProgress('widget');
```

It will return the *first* item's `` (by *first* I mean when `$('.circle').length >= 1`). *It works only if the widget is already inited. Raises an error otherwise*.

#### Get `CircleProgress` instance

[](#get-circleprogress-instance)

```
var instance = $('#circle').data('circle-progress');
```

#### Redraw existing circle

[](#redraw-existing-circle)

```
$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});
$('#circle').circleProgress('redraw'); // use current configuration and redraw
$('#circle').circleProgress(); // alias for 'redraw'
$('#circle').circleProgress({ size: 150 }); // set new size and redraw
```

*It works only if the widget is already inited. Raises an error otherwise*.

#### Change default options

[](#change-default-options)

```
$.circleProgress.defaults.size = 50;
```

FAQ
---

[](#faq)

#### How to start the animation only when the circle appears in browser's view (on scrolling)?

[](#how-to-start-the-animation-only-when-the-circle-appears-in-browsers-view-on-scrolling)

Here is [my proposed solution](https://github.com/kottenator/jquery-circle-progress/issues/8).

#### How to make the size flexible?

[](#how-to-make-the-size-flexible)

E.g. for Retina support or for responsive design, you can do it [in the following way](https://github.com/kottenator/jquery-circle-progress/issues/17).

#### What if I need it to run in IE8?

[](#what-if-i-need-it-to-run-in-ie8)

There is no full-feature support for IE8 (actually, I didn't imlpement IE8 support at all). But you may follow [my recommendations](https://github.com/kottenator/jquery-circle-progress/issues/35).

#### How to stop the animation?

[](#how-to-stop-the-animation)

Here is [what you can do](https://github.com/kottenator/jquery-circle-progress/issues/37).

#### Can I handle "click" event?

[](#can-i-handle-click-event)

It's not in the "core" but you can use [my example of mouse/touch events handling](http://output.jsbin.com/fetequ/5).

#### May I customize the shape somehow?

[](#may-i-customize-the-shape-somehow)

It's a bit "tricky" but possible. Here is [my little collection](https://github.com/kottenator/jquery-circle-progress/wiki/Custom-layouts).

###  Health Score

30

—

LowBetter than 65% of packages

Maintenance10

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

3908d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/eb711bf9c5107c5de3104691c826c451390970e7f4500a66b9f384efadc7d351?d=identicon)[thatsus](/maintainers/thatsus)

---

Top Contributors

[![thatsus-master](https://avatars.githubusercontent.com/u/16006839?v=4)](https://github.com/thatsus-master "thatsus-master (2 commits)")

### Embed Badge

![Health badge](/badges/thatsus-jquery-circle-progress/health.svg)

```
[![Health](https://phpackages.com/badges/thatsus-jquery-circle-progress/health.svg)](https://phpackages.com/packages/thatsus-jquery-circle-progress)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)