jQuery UI modal progress bar

I have a file in php that downloads a file and extracts it contents. I now execute that file periodically by creating a batch file and assigning it to the scheduler. How will i be able to popup a progress bar t开发者_开发技巧hat shows the status of the task file like downloading, extracting and so on.... I need to show the progress bar only when the task executes, say @ 6 pm daily...

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

---

You set the progress of the progress bar yourself with .progressbar( "value" , [value] ) function.

You will need to work out the percentage loaded of the current process for this to work. For example, you may want to show the progressbar to pre-laod all your images.

// 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));
}

---

the code for adding a description-text to the progressbar (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>

the script wo request the text-file ever 200ms:

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);

the text-file:

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

the php-script creates the text-file with one line who contains a value and a text who represent the current executing task.

---

I use a modal with a spinner gif inside it, when the task is completed it informs the user and close.

If you want something more complex as a true progress bar (percentage) jQuery UI has a progress bar widget where you can set progress by mean of

.progressbar({ value: x });