$( document ).ready(function() {
    $('#test-circle-1').waypoint(function() {
        $(this).circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 5,
            backgroundBorderWidth: 5,
            backgroundColor: '#f7f7f7',
            foregroundColor: '#dc971f',
            percent: 25,
            textAdditionalCss: 'font-size: 4rem;'
        });
    },{offset: '90%',triggerOnce: true});

    $('#test-circle-2').waypoint(function() {
        $(this).circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 5,
            backgroundBorderWidth: 5,
            backgroundColor: '#f7f7f7',
            foregroundColor: '#dc971f',
            percent: 90,
            textAdditionalCss: 'font-size: 4rem;'
        });
    },{offset: '90%',triggerOnce: true});

    $('#test-circle-3').waypoint(function() {
        $(this).circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 5,
            backgroundBorderWidth: 5,
            backgroundColor: '#f7f7f7',
            foregroundColor: '#dc971f',
            percent: 50,
            textAdditionalCss: 'font-size: 4rem;'
        });
    },{offset: '90%',triggerOnce: true});

    $('#test-circle-4').waypoint(function() {
        $(this).circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 5,
            backgroundBorderWidth: 5,
            backgroundColor: '#f7f7f7',
            foregroundColor: '#dc971f',
            percent: 100,
            textAdditionalCss: 'font-size: 4rem;'
        });
    },{offset: '90%',triggerOnce: true});
});