Ox.load('UI', {debug: true, theme: 'modern'}, function() {

    var $progressbar = Ox.Progressbar()
            .css({margin: '16px'})
            .appendTo(Ox.UI.$body)
            .start(),
        $status = Ox.Label({
                width: 256
            })
            .css({marginLeft: '16px'})
            .appendTo(Ox.UI.$body);
        $percent = $('<div>')
            .css({float: 'left', width: '60px', fontWeight: 'bold'})
            .appendTo($status);
        $remaining = $('<div>')
            .css({float: 'left', width: '180px', textAlign: 'right'})
            .appendTo($status);
        progress = 0,
        i = 0,
        interval = setInterval(function() {
            if (Math.random() < 0.25) {
                progress += 0.01;
                $progressbar.options({progress: progress});
            }
            if (i % 10 == 0 || progress >= 1) {
                var status = $progressbar.status();
                $percent.html(status.percent);
                $remaining.html('Remaining: ' + status.remaining);
            }
            if (progress >= 1) {
                clearInterval(interval);
            }
            i++;
        }, 25);

});