circlebars

Circle Bars
=============
>Circle Bars is a Jquery plugin which is used to add circular countdown timers or progress bars in your project easily.


- implemented with css; no canvas, png or jpg sprites messing around.
- highly customisable with various designed skins.
- less than 2KB when minified.
- optimised and production ready code in dist/ folder.
- SASS support also.
- CDN provided at unpkg
- Cross browser functionality

What to include
-------
Include jQuery first and then follow up.

1) By CDN
``html




`

1) By downloading the package

* first install with npm install circlebars
* then include these files in your html.

`html




`


Example
-------

`html


`
or

`html


`
or
`html


`

Options
-------

Options are provided as attributes 'data-circle-option':

`html



`

or in the "Circlebar()" call :

`javascript
$("#circle-1").Circlebar({
maxValue : 20,
fontSize : "14px",
triggerPercentage : true
});
`
- Note : The inline data attributes will overwrite the properties specified in the Circlebar() call .

The following options are supported :

- Note : value and maxValue options are common for both (timer and progressbar) but vary slightly in essence to both.

Behaviors :
* startValue : starting time for timer or initial value of progressbar | default = 0 | integer
* maxValue : the max time for timer to display or the value till which circlebar progresses | default = 60 | integer
* counter : the time in which timer increase by 1s | default = 1000 | integer (1000 == 1sec)
* triggerPercentage : should the circles styling alters according to progress level | default = false | boolean
* type : type of circlebar can be timer, progress or manual | default = "timer"

UI :

* dialWidth : the thickness of the circular ring | default = 5 | integer
* fontSize : the font size of the text in center of circle | default = "20px" | string with unit also ( units can be px, em, rm, % etc.)
* fontColor : the font color of the text in center of circle | default = "rgb(135, 206, 235)" | string (unit can be HEX, rgb, rgba, hsla, hsv, etc.)
* skin : the name of the custom skin to include | default = " " | string
* size : the size of the whole circle bar | default = "150px" | string with unit also ( units can be px, % etc.)

Example
-------

`html


$("#circle-1").Circlebar({
maxValue : 20,
fontSize : "14px",
triggerPercentage : true,
type: "progress"
});
`
and

`html



`


> Note that you can put any content inside

` like text, icons, images, etc.

Demo also available at Codepen

Supported browser
-------

Tested on Chrome, Safari, Firefox.