Posted In jQuery

How-To: Make Animated Progress Circles Using Circliful

A jQuery Plugin for Making Circles

My last post about the jQuery plugin Circliful was pretty popular. So, here’s another, detailing how to actually use Circliful.

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.

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.

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.

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.

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.

Well, now what?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. :) is proudly hosted by DigitalOcean

About these ads
  • Jeremiah Mbaria

    Hi thanks for the plugin. Is it possible to update the gauge programmatically without having to refresh the page?