JSFiddle - React, Tailwind, and code Playground

by Adam Mendoza

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id='myDialog'>
    <div id='progressMessage'></div>
    <div id='myProgressBar'></div>
</div>

CSS

#myProgressBar{
    height:15px;
}

#progressMessage{
    border: 1px solid gray;
    margin-bottom:10px;
}

JavaScript

$(document).ready(function(){
    var p=0;
    $("#myDialog").dialog({
        height: 200,
        width:500,
        autoOpen:true
    });
    $("#myProgressBar").progressbar({value:0});
        var timer = setInterval(function(){
            //This animates the bar
            $("#myProgressBar .ui-progressbar-value").animate({width: p+"%"}, 500);
            //This does static sets of the value
            //$("#myProgressBar").progressbar("option","value",p);
            if(p == 27){
                $("#progressMessage").append("Message 1<br />");
            }else if(p == 51){
                $("#progressMessage").append("Message 2<br />");
            }else if(p == 78){
                $("#progressMessage").append("Message 3<br />");
            }else if(p == 93){
                $("#progressMessage").append("Message 4<br />");
            }else if(p == 100){
                $("#progressMessage").append("Finished.");
            }
            p = p +3;
            if(p>100){
                $("#myProgressBar .ui-progressbar-value").animate({width: "100%"}, 500);
                //$("#myProgressBar").progressbar("option","value",100);
                clearInterval(timer);
            }
    },500);
});