JSFiddle - React, Tailwind, and code Playground

by Zsanett Tamás

HTML

<div id='progressbar-outer' style="">
    <div id='progressbar' style=""></div>
</div>
<button id="start_button">Start</button>

CSS

#progressbar-outer {
    height:2em;
    border:5px solid #000;
    width:15em;
}https://jsfiddle.net/Ljc3b6rn/4/#
#progressbar {
    width:0%;
    background-color:#F00;
    height:100%;
}

JavaScript

var progressbar = {};

$(function () {

    progressbar = {

        /** initial progress */
        progress: 0,

        /** maximum width of progressbar */
        progress_max: 0,

        /** The inner element of the progressbar (filled box). */
        $progress_bar: $('#progressbar'),

        /** Method to set the progressbar.
         */
        set: function (num) {
            if (this.progress_max && num) {
                this.progress = num / this.progress_max * 100;
                console.log('percent: ' + this.progress + '% - ' + num + '/' + this.progress_max);
                this.$progress_bar.width(String(this.progress) + '%');
            }
        }

    };

});


$('#start_button').on('click', function () {

    var iterations = 100;

    progressbar.progress_max = iterations;

    var loop = function (value) {
        progressbar.set(value);
        if (value < iterations) setTimeout(function () {
            loop(value + 1)
        }, 30);
        else {
            $('#progressbar').css('background-color', '#0F0');
            $('#start_button').prop('disabled',false);
        }
    }
    
    $('#start_button').prop('disabled',true);
    $('#progressbar').css('background-color', '#F00');
    loop(1);

});