You can create a function that:

1. Resets the bar's width and content
2. Restarts the animation.

This function can be set to be called after:

($('.bar').length - 1) * 100 + 2000 + your_chosen_delay_in_ms

For this to work, we have to pull out all the things that don't need repeating, like $(this).append('<span class="count"></span>').

Combined, it would look like this:

var animation_offset = 100;
var animation_duration = 2000;
var reanimate_delay = 3000;

function animateBars() {
    $('.bar').each(function(i){  
        var $bar = $(this);
        setTimeout(function(){
            $bar.css('width', $bar.attr('data-percent'));      
        }, i*animation_offset);
    });

    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).parent('.bar').attr('data-percent')
        }, {
            duration: animation_duration,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now) +'%');
            }
        });
    });

    setTimeout(
        reAnimateBars,
        (
            ($('.bar').length - 1) * animation_offset // Moment the last bar starts animating
            + animation_duration // Animation duration
            + reanimate_delay // Your chosen delay
        )
    );
}

function reAnimateBars() {
    // Reset the bars
    $('.bar .count').text('');
    $('.bar').css('width', '0%');
    // This will take some time (as per CSS transition property) to reset.
    // So we have to wait for that too.

    // Start the animation (again)
    // after CSS transition time for resetting is over
    setTimeout(animateBars, animation_duration);
}

setTimeout(function() {
    // Put non-repeating things here:
    $('.bar').append('<span class="count"></span>');

    // Start animation (first time)
    animateBars();
}, 500);