jQuery progress bar jumps to 100%
<p>I have got this set up:</p>

<blockquote>
  <p>HTML</p>
</blockquote>

<pre><code> &lt;div id="tst_loader"&gt;&lt;/div&gt;
</code></pre>

<blockquote>
  <p>JAVASCRIPT</p>
</blockquote>

<pre><code>$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
        $('#tst_loader').html(percentComplete * 100 + '%');
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
            $('#tst_loader').html(percentComplete * 100 + '%');
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: url,
    data: {feed:""},
    success: function(data){
        //Do something on success

     alert('done');
    }
</code></pre>

<blockquote>
  <p>the PHP code:</p>
</blockquote>

<pre><code>&lt;?php

$_POST['feed'] = 'http://www.cs.washington.edu/research/xmldatasets/data/tpc-h/orders.xml';/// A little heavier file for testing


                $dom = new DOMDocument; 
                $dom-&gt;load($_POST['feed']);

if(false !== $dom){

$use_errors = libxml_use_internal_errors(true); 
                        $s = simplexml_import_dom($dom);
                        libxml_clear_errors();
                        libxml_use_internal_errors($use_errors);
                        //libxml_disable_entity_loader( $oldDisable );

                        if(false !==    $s){    
$ctr = 0;
foreach ($s-&gt;channel-&gt;item as $item) {

  $out[$ctr]=$item-&gt;title;

$ctr++; 
}

echo json_encode( $out);

}


}




        ?&gt;
</code></pre>

<p>Whenever the code is run, the <code>progressbar</code> immediately jumps to <code>100%</code> even though the <code>RSS FEED</code> is still being fetched .... in other words, there is no progress showing. All seems great but it keeps jumping... Any Idea how to achieve this??... Thank You!</p>

<p><strong>EDIT:</strong> : Changed the link to something a little heavier : <a href="http://www.cs.washington.edu/research/xmldatasets/data/tpc-h/orders.xml" rel="nofollow">http://www.cs.washington.edu/research/xmldatasets/data/tpc-h/orders.xml</a></p>