JSFiddle - React, Tailwind, and code Playground

by joedoe

HTML

<input type="button" id = "button"  value="Dialog open">
    
<div id="dialog" title="New Project">
       <div id="DetailLinks" >
            <label for="time">time:</label>
            <input id='time'  name="time"></input>     
            
         
            <br>  </br>
            <div id="progressbar">
            </div>
       </div>    
 </div>

JavaScript

////////////////////////////////////////                     
   //Eventhandler für Button Dialog open
   ////////////////////////////////////////
    $("#button").on("click", function() {
        $("#dialog").dialog("open");
    });

     //////////////////////////////////////////////////////////////////////////
// Define  Dialog Popup Values
/////////////////////////////////////////////////////////////////////////
     $("#dialog").dialog({
            autoOpen: false,
            modal: false,  
            buttons: {
        		"Save": function() {
                    callProgressBar(30);
                    sleep(3000);
                    $("#time").val("3s");
                    //Here some none Ajax Call eg. File access
                    //Need to wait for a result
       
                    callProgressBar(60);
                    sleep(3000);
                    $("#time").val("6s");
                    //Here some none Ajax Call eg. File access
                    //Need to wait for a result
                    
                    callProgressBar(90);
                    sleep(3000);
                    $("#time").val("9s");
                    //Here some none Ajax Call eg. File access
                    //Need to wait for a result
                }
            }   
     });

     ////////////////////////////////////////////////////////////////
     // functions
     ////////////////////////////////////////////////////////////////
       
     function  callProgressBar(step){
              
             $( "#progressbar" ).progressbar({
          value: step
        });
     }; 


      function sleep(milliseconds) {
          var start = new Date().getTime();
          for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds){
              break;
            }
          }
        }