JQuery UI modal progress bar

Question

I have a file in php that downloads a file and extracts its contents. Now I execute this file periodically, creating a batch file and assigning it to the scheduler. How can I pop up a progress bar that shows the status of the task file, for example, loading, extracting, etc ... I need to show the progress bar only when the task is running, for example, from 18:00 every day ...

like this: http://www.codeproject.com/KB/scripting/loadingbox/load1.JPG

Answer 1

code for adding a description-text to the progress panel (if you need)

  <style>
      .ui-progressbar-text{
        width:100%;
        position:relative;
        top:-17px;
        text-align:center;
      }
  </style>
  <script>
  $(document).ready(function() {
    $("#progressbar").progressbar()
      .append('<div class="ui-progressbar-text" ></div>');
  </script>

script wo will request a text file every 200 ms:

window.setInterval(function(){
  $.get('currenttask.txt', function(data) {
    $('#progressbar')
      .progressbar({value: data.split(";")[0]}) //update the progressbar-value
      .find('.ui.progressbar-text') //update the progressbar-description
        .html(data.split(";")[1])
        .end()
      ;
  });
},200);

text file:

--begin of file
"30;extracting"
--end of file

php- script , , .

Answer 2

.progressbar( "value" , [value] ).

, , . , , .

// Define all image locations.
var source = ["apple.jpg", "orange.jpg", "pear.jpg", "banana.jpg"];
// Store HTML image objects in an array.
var imgObj = [];
// Store count of fully loaded images.
var imagesLoaded = 0;

for(var i in source) {
    // Create each image object, assign load function and 'src' attribute.
    imgObj[i] = new Image();
    imgObj.onload = function(e) { imageLoaded(e, source.length);
    imgObj.src = source[i];
}

function imageLoaded(e, loadTotal) {
    // Calculate percent of images loaded, send value to jquery UI element.
    imagesLoaded++;
    $('#myProgressBar').progressbar("value", 100 * (imagesLoaded / loadTotal));
}

Answer 3

modal spinner gif , , .

- , (), jQuery ,

.progressbar({ value: x });