Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

PHP Ajax Progress Bar

  • Posted on: 10 April 2016
  • By: admin

After my previous article about creating PHP Progress Bar using flush() function and Javascript, I try to create another PHP progress bar using different approach. This time, I will not use flush() function. Instead, I will use Ajax method and jQuery to accomplish the task. Basically, in this new progress bar we will use jQuery Ajax library to trigger the long running process in the web server and then use jQuery Ajax library again to read the progress status and display it in the browser.

Here is the step by step explanation.

The Index File (index.php)

This is the index file where the progress bar will be displayed. This file will also trigger the long running process in web server using Ajax. That long running script will write the progress status into a text file in JSON format. After that there is another Ajax call to check the progress by reading that text file.

// Start the session.
<!DOCTYPE html>
  <title>Progress Bar</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    #progress {
      width: 500px;
      border: 1px solid #aaa;
      height: 20px;
    #progress .bar {
      background-color: #ccc;
      height: 20px;
  <div id="progress"></div>
  <div id="message"></div>
    var timer;
    // The function to refresh the progress bar.
    function refreshProgress() {
      // We use Ajax again to check the progress by calling the checker script.
      // Also pass the session id to read the file because the file which storing the progress is placed in a file per session.
      // If the call was success, display the progress bar.
        url: "checker.php?file=<?php echo session_id() ?>",
          $("#progress").html('<div class="bar" style="width:' + data.percent + '%"></div>');
          // If the process is completed, we should stop the checking process.
          if (data.percent == 100) {
            timer = window.setInterval(completed, 1000);
    function completed() {
    // When the document is ready
      // Trigger the process in web server.
      $.ajax({url: "process.php"});
      // Refresh the progress bar every 1 second.
      timer = window.setInterval(refreshProgress, 1000);
The Process Script (process.php)

We need to create a file which will execute the long running process in web server. Like I said before this file will put the latest progress status into a text file in JSON format. The text file name is the same like the session id so it's possible to serve the different progress status for each client. We also need to make sure that the file is writable by web server. In this case I store the file inside tmp folder which I give permission for web server to write into.

// Start the session.

// The example total processes.
$total 20;

// The array for storing the progress.
$arr_content = array();

// Loop through process
// Calculate the percentatage.
$percent intval($i/$total 100);


// Put the progress percentage and message to array.
$arr_content['percent'] = $percent;
$arr_content['message'] = $i " row(s) processed.";


// Write the progress into file and serialize the PHP array into JSON format.
  // The file name is the session id.
file_put_contents("tmp/" session_id() . ".txt"json_encode($arr_content));


// Sleep one second so we can see the delay
The Checker File (checker.php)

The last file we need is the checker file which our Ajax script will call it several times until the process is completed. This file will return the progress status contained in the previous text file in JSON format so it can be read by the Javascript. After the process is finished, the text file will be deleted.

// The file has JSON type.
header('Content-Type: application/json');

// Prepare the file name from the query string.
// Don't use session_start here. Otherwise this file will be only executed after the process.php execution is done.
$file str_replace("."""$_GET['file']);
$file "tmp/" $file ".txt";

// Make sure the file is exist.
if (file_exists($file)) {
// Get the content and echo it.
$text file_get_contents($file);


// Convert to JSON to read the status.
$obj json_decode($text);
// If the process is finished, delete the file.
if ($obj->percent == 100) {
else {
json_encode(array("percent" => null"message" => null));

You can see the live demo there.


The complete source code for my PHP progress bar scripts are available at GitHub : https://github.com/w3shaman/php-progress-bar.


I think I've successfully create my own process.php. And I got this in my .txt {"percent":100,"message":"58 row(s) processed."}. But my progress bar didn't work. I'm trying this in Yii2 (MVC).
Do you have any suggestion about this? Am I get right txt result?

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.