Customizable Circular Progress Bar with jQuery and CSS3 - Circle Diagram

Circle Diagram is a super simple jQuery plugin which allows you to draw a customizable circular progress bar with percentage display by using CSS3 transforms.

See also:

• CProgress - jQuery Circular Progress Bar Plugin
• Animated Circular Progress Bar with jQuery and Canvas - Circle Progress
• Circular Percentage Loader Plugin with jQuery and Canvas - ClassyLoader
• Percentage Loader - jQuery Progress Bar Plugin

How to use it:

1. Load the jQuery library and the jQuery circle diagram in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.diagram.js"></script>

2. Create an empty DIV element in the web page and use Html5 data-percent attribute to specify the percentage used in the circular progress bar.

<div class="demo" data-percent="33.3%"></div>

3. Initialize the plugin to create a circular progress bar with default settings.

$('.demo').diagram();

4. Optional settings to customize the progress bar.

$('.demo').diagram({
size: "200", // graph size
borderWidth: "20", // border width
bgFill: "#95a5a6", // background color
frFill: "#1abc9c", // foreground color
textSize: 54, // text color
font: "serif", // font
textColor: '#2a2a2a' // text color
});

Change logs:

2015-04-28

• minor changes.

2015-04-08

• all options can be set via data-attributes.

2015-02-22

• Update jquery.diagram.js

---

This awesome jQuery plugin is developed by monochromer. For more Advanced Usages, please check the demo page or visit the official website.