Posted In JavaScript

Circliful: A jQuery Plugin Providing Animated Progress Circles

Animated progress circles

I use something similar, but not quite as nice (these are animated progress circles) on my Work With Me page. They don’t have percentages and are just hacked together from

The jquery-plugin-circliful repository on GitHub is way more advanced than what I have on my Work With Me page. Cicliful provides animated progress circles, which you can see on the demo page.

Circulful is very easy to use. Just include jQuery and the Circliful JavaScript and CSS on your page:

Add an element to your site with a unique ID:

Then, to get the progress circle to appear, add this JavaScript:

There’s a lot of optional data- attributes that you can set, as well. The entire list is below, straight from the README.

  • dimension / is the height and width of the element / default is 200px on 200px
  • text / will be deisplayed inside of the circle over the info element
  • info / will be deisplayed inside of the circle bellow the text element (can be empty if you dont want to show info text)
  • width / is the size of circle / default is 15px
  • fontsize / is the font size for the text element / default is 15px
  • percent / can be 1 to 100
  • fgcolor / is the foreground color of the circle / default is #556b2f
  • bgcolor / is the background color of the cicle / default is #eee
  • fill / is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle)
  • type / full or half circle for example data-type=”half” if not set the circle will be a full circle / default full circle
  • total / If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total=”750″ and data-part=”350″ and the circle will show the percentage value 36,85%
  • part
  • border / Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline.
  • icon / Fontawesome icon class without the fa- before the class for example not fa-plus just plus
  • iconsize / Will set the font size of the icon.
  • iconcolor / Will set the font color of the icon.
  • animationstep / Will set the animation step, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1

Circliful is available on GitHub, there’s also a demo. I’ll eventually switch the progress circles on my Work With Me page to use Circliful. I mostly enjoy it’s ease of customization through data- attributes.

If you need help configuring something, feel free to leave a comment. Make sure you look through the issues that have already been reported, too.

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
  • Pingback: How-To: Make Animated Progress Circles Using Circliful – Tyler Longren()

  • Lukas Tiberius Edwards

    I would like to get the animation to trigger when the user scrolls past a certain point, rather than on page load. Is this possible?


    this plugin is not supporting in safari……plz help

  • Amol

    We have used your jQuery plugin circliful.
    Thanks for creating it. While using the plugin we have got one issue.
    Onclick of F12 key on key board, canvas circle disappears. Can you please help me out in resolving this issue.
    Your help will be appreciated.
    Thanks 🙂

  • MySchizoBuddy

    the demo link is broken

  • ATS

    Hi. I have a suggestion. Is it not better to be able to style the circle using CSS instead of the data-fgcolor attribute? Or is this currently possible?