Download the PHP package thatsus/jquery-circle-progress without Composer
On this page you can find all versions of the php package thatsus/jquery-circle-progress. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package jquery-circle-progress
jquery-circle-progress
jQuery Plugin to draw animated circular progress bars like this:
Check out more examples! Or maybe the crazy one?
Install
Download latest GitHub release
or bower install jquery-circle-progress
Usage
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 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. 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
When animation is enabled, there are 3 events available:
| Event | Handler |
|---|---|
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 event |
Browsers support
It uses <canvas> which is supported by all modern browsers (including mobile browsers)
and Internet Explorer 9+ (Can I Use).
I have not implemented any fallback / polyfill for unsupported browsers yet (i.e. for Internet Explorer 8 and older / misc browsers).
API
Get/set value
Get it:
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:
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 <canvas>
It will return the first item's <canvas> (by first I mean when $('.circle').length >= 1).
It works only if the widget is already inited. Raises an error otherwise.
Get CircleProgress instance
Redraw existing circle
It works only if the widget is already inited. Raises an error otherwise.
Change default options
FAQ
How to start the animation only when the circle appears in browser's view (on scrolling)?
Here is my proposed solution.
How to make the size flexible?
E.g. for Retina support or for responsive design, you can do it in the following way.
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.
How to stop the animation?
Here is what you can do.
Can I handle "click" event?
It's not in the "core" but you can use my example of mouse/touch events handling.
May I customize the shape somehow?
It's a bit "tricky" but possible. Here is my little collection.
