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.