Progressus - Yet another Progress Bar written in Javascript.

Progress Bar with custom style and animation

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="example-5 change-color-animation"></div>

CSS

.example-5 {
    margin-top: 10px;
    width: 250px;
    height: 60px;
    border-radius: 5px;
    border: 2px solid black;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

.default-color {
    background: linear-gradient(347deg, #8eb88e, darkgreen);
}

.change-color-animation {
    animation: change-color 4s linear 0s infinite;
}

@keyframes change-color {
    0% {
        background-color: green;
    }
    50% {
        background-color: #8eb88e;
    }
    100% {
        background-color: green;
    }
}

.example-5 > .progress-bar-progress {
    top: 25px;
    margin: 0 5px 0 5px;
    max-width: 96%;
    position: absolute;
    height: 10px;
    background-color: white;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    border-radius: 3px;
}

.example-5 > .progress-bar-value {
    top: 35px;
    position: absolute;
    padding: 5px;
    font-size: 12px;
    text-align: left;
}

.example-5 > .progress-bar-text {
    top: 0px;
    padding: 5px;
    position: absolute;
    font-size: 12px;
    text-align: left;
}

JavaScript

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

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

p.container.addEventListener('progressus:progress:change', function(event) {
    let percentage = event.detail.percentage;
    if (percentage === 100) {
        this.classList.remove('change-color-animation');
        this.classList.add('default-color');
    }
});

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);
    }
}