Progressus - Yet another Progress Bar written in Javascript.

Progress Bar with default options

by João Morais

HTML

<script src="https://rawgit.com/jcsmorais/progressus/master/dist/progressus.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jcsmorais/progressus/master/dist/progressus.min.css">
<div class="progressus example-1"></div>

JavaScript

let tasks = [
    'Loading configuration files...',
    'Loading assets...',
    'Loading libraries...',
    'Loading external dependencies...',
    'Setting up database...',
    'Installing components...',
];

let p = new Progressus().init('.example-1', {max: 6});

simulate(tasks, {
    delay: 2000,
    start: function (value, total, task) {
        p.setText(task)
    },
    complete: function (value, total, task) {
        p.setValue(value);
        p.setText('Completed!');
    },
    done: function () {
        p.setText('Done.');
    }
});


// Simulation of an async execution of tasks based on given options
function simulate(tasks, options) {
    options = options || {};
    options.delay = options.delay || 2 * 1000;

    var total = tasks.length;

    if (!total) {
        throw new Error('No tasks given.');
    }

    iterate();

    function iterate() {
        var task = tasks.shift();
        var totalLeft = tasks.length;
        var value = total - totalLeft;

        if (options.start) {
            options.start.call(this, value, total, task);
        }

        setTimeout(function () {
            if (options.complete) {
                options.complete.call(this, value, total, task);
            }

            if (totalLeft > 0) {
                iterate();

            } else if (options.done) {
                options.done.call(this, value, total, task);
            }
        }, options.delay);
    }
}