How-To: Make Animated Progress Circles Using Circliful

by Tyler Longren on September 17, 2014

The modern web is always changing, and this article is more than two years old.

Tyler Longren demonstrates the use of Circliful to make circular statistic indicators using a JQuery plugin.

A jQuery Plugin for Making Circles

Circliful has a number of options that can be set as data attributes. Data attributes are the primary method for setting various options, such as the circle background color, fill color, and the percentage. All of the possible data attributes are available in the README on GitHub.

Using Circliful is similar to every other jQuery plugin. Just make sure you’re loading up jQuery prior to loading the Circliful JavaScript.

1. Include Circliful JavaScript and CSS

Include the JavaScript and CSS files from Circliful just like you would any other JavaScript or CSS file.

<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.circliful.min.js"></script>

2. Add an element with the necessary data attributes

This is where you can define all the data attributes that are listed in the README. I typically use an empty div with the following data attributes: data-dimension, data-text, data-info, data-width, data-fontsize, data-percent, data-fgcolor, data-bgcolor, data-fill, data-total, and data-part.

You’ll want to give your newly created element a unique ID to use as a selector in jQuery. I used circle-1 as the element ID for this example.

<div id="circle-1" class="circle" data-dimension="250" data-text="85%" data-info="Sweet" data-width="30" data-fontsize="38" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="85"></div>

3. Add necessary JavaScript

This tells Circliful which element to build the circle from. We want to target the ID that we gave to our empty element/div above.

$( document ).ready(function() {

That’s it! You should now have a circle similar to the first circle in the example below. If you have any questions, feel free to leave a comment or get in touch with me directly.

See Also:  Getting started with Redux using the Mullet Stack

You can find the necessary JavaScript and CSS on the Circliful GitHub page. You can see an example of Circliful in the embedded pen below.

See the Pen erojh by Tyler Longren (@tlongren) on CodePen.