JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" id = "button" value="open Dialog and press Save">
<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");
callProgressBar(0);
});
//////////////////////////////////////////////////////////////////////////
// Define Dialog Popup Values
/////////////////////////////////////////////////////////////////////////
$("#dialog").dialog({
autoOpen: false,
modal: true, //Lässt keine Aktion bis zum Schließen des Dialog zu
buttons: {
"Save": function() {
callProgressBar(30);
setTimeout( function(){callProgressBar(60)},3000)
setTimeout( function(){callProgressBar(100)},9000)
setTimeout( function(){
$("#dialog").dialog( "close")
},10000)
}
}
});
////////////////////////////////////////////////////////////////
// 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;
}
}
}