JSFiddle - React, Tailwind, and code Playground

HTML

<button id="start_button">Start</button>

	<div id='progressbar-wrapper' style="position: fixed;top: 80px;display: block;margin: 0 auto;width: 100%;height: 30px;opacity: 1;zIndex: 9998">
		<div id='progressbar-outer' style="display: table;margin: 0 auto;backgroundColor: #FFFFFF;border: 5px solid #000000;width: 50%;height: 30px;opacity: 1;zIndex: 9998">
			<div id='progressbar' style="float:left: 50;width: 0;height: 30px;backgroundColor: #000000;border: 0;opacity: 1;zIndex: 99999;background-color: red;">
			</div>
		</div>
	</div>

	<div id="loading-animation" style="position: fixed;top: 150px;left: 0;height: 120px;width: 100%;font-size: 100px;line-height: 120px;text-align: center;color: #000000;zIndex: 9999;">
	    ...loading...<br /><small>Please be patient.</small>
	</div>

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);
                /*
                (function(x) {
                    setTimeout(function() {
                        progressbar.$progress_bar.width(String(x) + '%');
                    }, 100);
                })(this.progress);
                */
                $('#progressbar').animate({
    width: String(this.progress) + '%',
  }, 500, function() {
    // Animation complete.
  });
               // $('#progressbar').css('width', String(this.progress) + '%');
                //this.$progress_bar.width(String(this.progress) + '%');
            }
        },

        fn_wrap: function (num) {
            setTimeout(function() {
                this.set(num);
            }, 0);
        }

	};

});


$('#start_button').on('click', function () {
$('#progressbar').css('width', '0%');
	var iterations = 1000000000;

	progressbar.progress_max = iterations;

	var loop = function () {

		for (var i = 1; i <= iterations; i++) {

			if (iterations % i === 100) {

				progressbar.set(i); //only updates the progressbar in the last iteration

				//progressbar.fn_wrap(i); //even worse, since no output to the console is produced

				//setTimeout(function() {
				//	progressbar.set(i);
				//}, 0);

			}
		}
	}

	//setTimeout(loop, 0);
	loop();

});