Circle Progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JavaScript and jQuery plugin.

See examples or go to the project site

Getting Started

As plain JavaScript

Download the minified production version

In your web page:

<div class="progress"></div>

<script src="dist/circle-progress.min.js"></script>

<script>
    new CircleProgress('.progress');
</script>

As jQuery plugin

Download the minified jQuery production version

In your web page:

<div class="progress"></div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="dist/jquery.circle-progress.min.js"></script>

<script>
  jQuery(function($) {
    $('.progress').circleProgress();
  });
</script>

A note about jQuery file

jQuery version of Circle Progress is built on top of plain JavaScript version. It uses jQuery Widget Factory. Two files are available: one that contains the Widget Factory code, and one that doesn't.

1. You can use the smaller jquery.circle-progress.bare.min.js, if you have already included the jQuery Widget Factory or another native jQuery widget in your page.
2. Otherwise you must use jquery.circle-progress.min.js, which includes the jQuery Widget Factory code.

Usage

Initiate Circle Progress

Plain JavaScript

const circleProgress = new CircleProgress(element, options, doc);

where

element is HTML element or selector to be converted into a progress circle (required),

options - object map of options (optional),

doc - the document we are acting upon (optional).

jQuery

$('.progress').circleProgress(options);

where options is object map of options (optional).

Options

You can customize Circle Progress with these options by either passing options object at initiation, or setting them later, e. g.:

In plain js

Set options as properties on a CircleProgress instance:

circleProgress.max = 100;
circleProgress.value = 20;

or using the chainable attr method by passing it option key and value:

circleProgress
	.attr('max', 100)
	.attr('value', 20);

or options object

circleProgress.attr({
	max: 100,
	value: 20,
});

In jQuery

$('.progress').circleProgress('value', 20);

or

$('.progress').circleProgress({
	max: 100,
	value: 20,
});

All available options

To customize widget's appearance, you can style its underlying SVG elements with CSS. The elements are:

You can use any SVG presentation attributes on these elements. Particularly useful are: fill, stroke, stroke-width, stroke-linecap properties. (See examples)

The default options are stored in CircleProgress.defaults or jQuery.fn.circleProgress.defaults. The two are references to the same object. You can override them, so that all instances will be created with the overridden options.

Browser Support

Chrome, Firefox, Safari, Edge and IE 11 are supported.

License

© 2018 Tigran Sargsyan

Licensed under (the MIT License)