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');