PHP progress bar on download

I wrote a PHP code for site backup and I am compressing the whole site and allowing the user to download it in his/her machine. The compression and download works fine but since it is a site backup, it is taking some time to zip and download and I don't want the user to navigate to any other page while the zip/download is in progress. Is there any way, I can show a progress bar while zip/download is in progress? I searched in google but it seems that you can show progress bar on upload but not while downloading.

I created a temp file before the zip actually takes place and did a check if the file exists. My logic was if the file exist then display a modal dialog in JS with "please wait.." message but since the download makes use of header, I cannot basically echo anything before download.

Any suggestions?

You can use a fake progress bar using a gif animation...

<script type="text/javascript">
  function SubmitForm() {
    StartProgress();
    var backup = document.getElementById("backup");
    backup.submit();
  }
  function StartProgress() {
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.display = "block";
    setTimeout("ProgressImage.src = ProgressImage.src", 100);
    return true;
  }
  </script>

  <form id="backup" action="backup.php" method="post">
    <input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
  </form>
  <div style="display: none" id="progress"><img id="progress_image" src="css/progress_bar.gif" alt="BackUp in progress..."></div>

Here you can see my idea working... please click on BackUp button to test it...

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
.box {
  padding: 20px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border: #C0C0C0 3px solid;
  border-radius: 5px;
  min-width: 270px;
  height: 150px;
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
  background-color: #006699;
}
.backup {
  padding: 10px;
  margin: 0 auto;
  font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
  background-color: darkviolet;
  color: black;
  border-radius: 5px;
  border: #C0C0C0 3px solid;
  box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
#progress {
  padding: 20px;
}
.cleardiv {
  clear: both;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BackUp Demo Progress Bar</title>
<script type="text/javascript">
  function SubmitForm() {
    StartProgress();
    var backup = document.getElementById("backup");
    backup.submit();
  }
  function StartProgress() {
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.display = "block";
    setTimeout("ProgressImage.src = ProgressImage.src", 100);
    return true;
  }
</script>
</head>
<body>
<div class="box">
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress">
<img id="progress_image" src="http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gif" alt="BackUp in progress...">
</div>
<div class="cleardiv"></div>
</div>
</body>
</html>

Then search a gif animation in order to display a progress bar...

Google + ajax + loader + gif

I hope this helps :)