JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="progressbar" style='height: 100px;'></div>
<div id="overlay">
 <img src='http://i1097.photobucket.com/albums/g350/laluxaeterna/amen-break.jpg' style='height: 100px; width: 900px; '/>
</div>
<button id='click' style='position: absolute; z-index: 11;'>GO</button>

CSS

#overlay {
  background-color: black;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0.2; /* also -moz-opacity, etc. */
  z-index: 10;
}

JavaScript

$(function () {
    var current;
    var max = 100000;
    var initial = 0; // need to add seconds to this value every second.
    $("#progressbar").progressbar({
        value: initial,
        max: max
    });

    function update() {
        current = initial; //the value on each function call
        $("#progressbar").progressbar({
            value: current
        });
        if (current >= max) clearInterval(interval);
        initial += 50; //choose how fast to the number will grow
        console.log(current);
    };
    var interval = setInterval(update, 500); //choose how fast to update
});