Small script to add progress bar to cycle2 http://jquery.malsup.com/cycle2/ slideshows, supports multiple slideshows on one page

cycle2-progress.js

//Author Simon Partridge http://simonjpartridge.co.uk
//Supports multiple slideshows on one page
//Simply add <div class="cycle-progress"></div> within the cycle-slideshow div and style as you wish

$('.cycle-slideshow').each(function(){
    var slideshow = $(this);
    var progress = $(this).children('.cycle-progress');

    slideshow.on( 'cycle-initialized cycle-before', function( e, opts ) {
        progress.stop(true).css( 'width', 0 );
    });

    slideshow.on( 'cycle-initialized cycle-after', function( e, opts ) {
        if ( ! slideshow.is('.cycle-paused') )
            progress.animate({ width: '100%' }, opts.timeout, 'linear' );
    });

    slideshow.on( 'cycle-paused', function( e, opts ) {
       progress.stop();
    });

    slideshow.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) {
        progress.animate({ width: '100%' }, timeoutRemaining, 'linear' );
    });
});