oxjs/demos/progress/js/progress.js

'use strict';

Ox.load('UI', {debug: true}, function() {
    var cancelled = false,
        paused = false,
        width = 384,
        $progressbar = Ox.Progressbar({
                showCancelButton: true,
                showPauseButton: true,
                showPercent: true,
                showRestartButton: true,
                showTime: true,
                width: width
            })
            .css({margin: '16px'})
            .appendTo(Ox.UI.$body)
            .bindEvent({
                cancel: function() {
                    cancelled = true;
                    setPercent();
                },
                complete: function() {
                    clearInterval(interval);
                },
                pause: function() {
                    paused = true;
                    setPercent();
                },
                restart: function() {
                    cancelled = false;
                    paused = false;
                    progress = 0;
                },
                resume: function() {
                    paused = false;
                }
            }),
        $status = Ox.Label({
                width: width
            })
            .css({marginLeft: '16px'})
            .appendTo(Ox.UI.$body),
        $percent = $('<div>')
            .css({float: 'left', width: '64px', fontWeight: 'bold'})
            .appendTo($status),
        $remaining = $('<div>')
            .css({float: 'left', width: width - 64 - 16 + 'px', textAlign: 'right'})
            .appendTo($status),
        progress = 0,
        i = 0,
        interval = setInterval(function() {
            if (!cancelled && !paused) {
                if (Math.random() < 0.25) {
                    progress += 0.01;
                    $progressbar.options({progress: progress});
                }
                if (i % 10 == 0 || progress >= 1) {
                    var status = $progressbar.status();
                    setPercent();
                    $remaining.html('Remaining: ' + (
                        status.remaining == 0 ? 'done'
                        : status.remaining == Infinity ? 'unknown'
                        : Ox.formatDuration(status.remaining, 'long')
                    ));
                }
                if (progress >= 1) {
                    clearInterval(interval);
                }
                i++;
            }
        }, 25);
    function setPercent() {
        $percent.html(
            Math.round($progressbar.options('progress') * 100) + '%'
        );
    }
});