Bar in Progress

by acbabis

HTML

<span id="Vel"></span><span id="Target"></span>

<div id="tests"></div>

CSS

.bar {
    height: 30px;
    width: 0;
}
.actual {
    background-color: blue;
    opacity: .1;
}
.estimate {
    background-color: red
}

JavaScript

// Percentage per second
var ACTUALS = [function (t) {
    return t * 10;
}, function (t) {
    return t * t / 4;
}, function (t) {
    return 20 * Math.sqrt(t);
}, function (t) {
    if (t < 5) {
        return t * 10;
    } else {
        return 50 + (t - 5) * 2;
    }
}, function(t){
    return 5 * t + 5 * Math.sin(Math.PI * 2 * t / 5);
}];

function createConnectionModel(initialTarget, initialWait) {
    var firstUpdate = true;
    var priorDisp = 0;
    var actualDisp = initialTarget || 10;
    var startTime = Date.now();
    var priorUpdate = startTime - initialWait || 2000;
    var lastUpdate = startTime;
    return {
        progress: function () {
            return actualDisp;
        },
        estimatedProgress: function () {
            // Current position + estimated distance since last update
            return actualDisp + (Date.now() - lastUpdate) * (actualDisp - priorDisp) / (lastUpdate - priorUpdate);
        },
        lastUpdateTime: function () {
            return lastUpdate;
        },
        elapsedTime: function () {
            return (Date.now() - startTime) / 1000;
        },
        velocity: function () {
            return 1000 * (actualDisp - priorDisp) / (lastUpdate - priorUpdate);
        },
        setValue: function (value) {
            // Update times
            priorUpdate = lastUpdate;
            lastUpdate = Date.now();

            // Update displacements
            if (firstUpdate) {
                firstUpdate = false;
            } else {
                priorDisp = actualDisp;
            }
            actualDisp = Math.min(value, 100);
        },
        isDone: function () {
            return actualDisp === 100;
        }
    }
}

function start(func) {
    var akbar = $('<div class="actual bar"/>').appendTo('#tests');
    var esbar = $('<div class="estimate bar"/>').appendTo('#tests');
    $('#tests').append('<br>');
    var connection = createConnectionModel();

    var interval = setInterval(function () {
 ...