https://github.com/itaditya/circlebars
Add circular progress bars and countdown timers easily with circlebars Created by @itaditya. Demo at >
https://github.com/itaditya/circlebars
circle-bars jquery progress-bar progressbar timer
Last synced: 9 months ago
JSON representation
Add circular progress bars and countdown timers easily with circlebars Created by @itaditya. Demo at >
- Host: GitHub
- URL: https://github.com/itaditya/circlebars
- Owner: itaditya
- License: mit
- Created: 2016-09-11T07:38:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-05T15:35:00.000Z (over 7 years ago)
- Last Synced: 2025-02-28T09:20:59.579Z (10 months ago)
- Topics: circle-bars, jquery, progress-bar, progressbar, timer
- Language: JavaScript
- Homepage: http://circlebar.surge.sh/
- Size: 2.42 MB
- Stars: 38
- Watchers: 2
- Forks: 20
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
Circle Bars
=============
>Circle Bars is a Jquery plugin which is used to add circular countdown timers or progress bars in your project easily.
[](https://www.npmjs.com/package/circlebars)
[](https://www.npmjs.com/package/circlebars)
[](https://github.com/ncs-jss/circlebars)
[](https://www.codacy.com/app/adityaa803/circlebars?utm_source=github.com&utm_medium=referral&utm_content=ncs-jss/circlebars&utm_campaign=Badge_Grade)
- 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](https://unpkg.com/circlebars@1.0.3/dist/)
- 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
00:00:00
new Circlebar({
element : "#circle-1"
});
```
or
```html
00:00:00
$(".circle-2").Circlebar({
```
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.)
Avaliable skins
-------
All Skins are located in the [`dist/skins`](https://github.com/itaditya/circlebars/tree/master/dist/skins) folder. Here are the ones currently avaliable:
* [Blue](https://github.com/itaditya/circlebars/blob/master/dist/skins/bluecircle.css)
* [Cobalt](https://github.com/itaditya/circlebars/blob/master/dist/skins/cobaltcircle.css)
* [Fire](https://github.com/itaditya/circlebars/blob/master/dist/skins/firecircle.css)
* [Matte Black](https://github.com/itaditya/circlebars/blob/master/assets/skins/matteblackcircle.css)
* [Purple](https://github.com/itaditya/circlebars/blob/master/dist/skins/purplecircle.css)
* [Simple](https://github.com/itaditya/circlebars/blob/master/dist/skins/simplecircle.css)
* [White](https://github.com/itaditya/circlebars/blob/master/dist/skins/whitecircle.css)
* [Yellow](https://github.com/itaditya/circlebars/blob/master/dist/skins/yellowcircle.css)
To use a skin, first include it as a css file.
```html
```
Then, you can set the custom skin name with the `skin` option when creating your circebar instance.
```javascript
$("#circle-1").Circlebar({
skin: "blue"
});
```
Or, as a data attribute when using a DOM element.
```html
```
To make your own skin, use one of the included ones and edit the css to your specification.
Example
-------
```html
00:00:00
$("#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](http://codepen.io/itaditya/pen/QKExjL)
Supported browser
-------
Tested on Chrome, Safari, Firefox.