JSFiddle - React, Tailwind, and code Playground

by melachel

HTML

<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    </head>
    <body>
        <div id="dialog-modal" title="Loading...">
            <div id="progressbar"></div>
        </div>
    </body>
</html>

JavaScript

$(function() {
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });

    $( "#progressbar" ).progressbar({
        value: 0
    });

    setTimeout(updateProgressBar, 1000);
});

var tasks_completed = 0;
var total_tasks = 10;  // write here the number of elements you have to wait for
function updateProgressBar() {
    tasks_completed++;
    
    $( "#progressbar" ).progressbar({
        value: tasks_completed / total_tasks * 100
    });
    
    // you won't need this, just call `updateProgressBar` in your `when` functions.
    if (tasks_completed < total_tasks)
        setTimeout(updateProgressBar, 1000);
}