JSFiddle - React, Tailwind, and code Playground

by navi2000

HTML

<input type="button" id="show" value="Show dialog" />

<div id="sending-data-popup" title="Sending data...">
  <p>Please wait</p>
  <div id="send-progress-bar"></div>
</div>

JavaScript

var index = 0;
var total = 10;
var iv = 0;

function hideDialog() {
    index++;
    $("#send-progress-bar").progressbar({value: 100 * (index / total)});
    if (index == total) {
        clearInterval(iv);
        $("#send-progress-bar").progressbar('destroy');
        $("#sending-data-popup").dialog('close');
    }
}

$(document).ready(function() {
    $("#show").click(function() {
        $("#sending-data-popup").dialog({
            modal: true,
            closeOnEscape: false,
            open: function(event, ui) {$(".ui-dialog-titlebar-close").hide();}
        });

        $("#send-progress-bar").progressbar({value: 0});

        iv = setInterval("hideDialog()", 500);
        return false;
    });
});