Show progessbar on page load - php

Question

I have created the script of downloading an facebook album in php. When I will click on download button, script is fetching all photos in that album behind the scene and zip them inside a folder. I want to start a “progress bar” as soon as user-click download button as download process may take time.
Following is index.php
if ($album['count'] != "0 photos")
{
echo "";
}
Here I am passing album id to the download.php
and following is the code for download.php where I am downloading images into the downloads folder, creating the zip file of all that images and downloading that zip file.
<?php
require 'facebook/facebook.php';
$facebook = new Facebook(array(
'appId' => 'xxxxxxxxxxxxx',
'secret' => 'xxxxxxxxxxxxxxxxxxxxx',
'cookie' => true,
));
//GETTING THE ID HERE FROM INDEX.PHP FILE
$albumid = $_GET['id'];
$photos = $facebook->api("/{$albumid}/photos?limit=50");
$file_name = rand(1, 99999) . "_image.zip";
$albumArr = array();
foreach ($photos['data'] as $photo) {
$albumArr[] = $photo['source'];
}
create_zip($albumArr, $file_name);
function create_zip($files, $file_name, $overwrite = false) {
$i = 0;
$imgFiles = array();
foreach ($files as $imglink) {
$img = #file_get_contents($imglink);
$destination_path = 'downloads/' . time() . "Image_" . $i . '.jpg';
#file_put_contents($destination_path, $img);
$imgFiles[] = $destination_path;
$i++;
}
if (file_exists($file_name) && !$overwrite) {
return false;
}
$valid_files = array();
if (is_array($imgFiles)) {
foreach ($imgFiles as $file) {
$valid_files[] = $file;
}
}
if (count($valid_files)) {
$zip = new ZipArchive();
if ($zip->open($file_name, $overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) {
echo "Sorry ZIP creation failed at this time";
}
$size1 = 0;
foreach ($valid_files as $file) {
$size1+= filesize($file);
$zip->addFile($file, pathinfo($file, PATHINFO_BASENAME));
}
$zip->close();
$allimages = glob('downloads/*.jpg');
foreach ($allimages as $img) { // iterate images
if (is_file($img)) {
unlink($img); // delete images
}
}
$count = $zip->numFiles;
$resultArr = array();
$resultArr['count'] = $count;
$resultArr['destination'] = $file_name;
$filename = $file_name;
$filepath = $_SERVER['HTTP_HOST'] . '/';
$path = $filepath . $filename;
if (file_exists($filename)) {
// push to download the zip
header('Content-type: application/zip');
header('Content-Disposition: attachment; filename="' . $filename . '"');
readfile($filename);
unlink($filename);
}
} else {
return false;
}
}
?>
I want to start a “progress bar” as soon as user-click download button as download process may take time.
How can I do this? Thanks

Answer 1

Something like this? PLease tell me if I didn't understand your question
HTML:
<img id="loadingImage" src="pathToImage" alt="" style="display:none" />
//pathToImage is the path to where your image is located
jQuery:
$('#YourButtonID').click(function(){
$('#loadingImage').css('display','block');
//call your download page
return false;
});
After your download and redirect are finished, call this method to hide the progressbar
$('#loadingImage').css('display','none');

Answer 2

You can do this by using ajax.
$(document).ready(function()
{
$("#download_button").click(function() {
document.getElementById('progressbar').style.display='';
//call your download page.
});
});