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.
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.
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.