How to add an animated circular progress bars

Step 1

Go to this page to download the zip file : https://github.com/kottenator/jquery-circle-progress
Then upload and enqueue the JS file :

wp_enqueue_script( 'circle-progress-js', plugin_dir_url( __FILE__ ) . 'assets/js/circle-progress.min.js', array('jquery'),'', true );

[ see HOWTO to learn how to add custom files ]

Step 2

Add a Div and change his ID to circle1

Step 3

Add a Code Block and insert this Javascript code :

(function($) {
    $('#circle1').circleProgress({
        value: 1,
        thickness: 10,
        size: 150,
        fill: {
            gradient: ["#FF5252", "orange"]
        },
        animation: {
            duration: 2000
        }
    });
})(jQuery);

Here is the result:

There are plenty of options, you can change the thickness, the colors, the speed, the easing...

More info in the official page.

Step 4

To add a progress value inside the circle, just add a Text element inside the Div and delete the default text to empty it :

Step 5

Select your Text element, then in Advanced /Layout, select position: absolute.

Step 6

Select the parent Div and choose this layout :

The code :

$('#circle1').circleProgress({
    value: 1,
    thickness: 10,
    size: 150,
    fill: {
        gradient: ["#FF5252", "orange"]
    },
    animation: {
        duration: 2000
    }
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('#text_block-24-433').html(Math.round(100 * progress) + '%');
});

Change the #text_block-24-433 by your Text id.

Note

Don't forget to use the Waypoints library if you want the animation to start only when it enters the viewport. Here is an example :

var waypoints = $('#circle1').waypoint(function(direction) {

    $('#circle1').circleProgress({
        value: 1,
        lineCap: 'round',
        thickness: 10,
        size: 100,
        fill: {
            gradient: ["red", "orange"]
        }
    });

    this.destroy()
}, {
    offset: '100%'
})

More info about Waypoints :
Trigger a function when you scroll to an element

Note 2

If you want to change the easing effect, like in the circles at the top of this page, you have to load the jquery-ui.js file :

wp_enqueue_script('jquery-ui', '//code.jquery.com/ui/1.11.3/jquery-ui.js', array(), '1.11.3');