Ajax & PHP based Progress bar to display growing status

Update progress with Fetch API

This example posts the current width to the same progress-bar.php processor used by the demo. The processor returns the next width as plain text, and polling stops when the value reaches 200.

async function updateProgress() {
  const form = document.forms[0];
  const body = new URLSearchParams({ width: form.width.value });
  const response = await fetch('progress-bar.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body
  });
  if (!response.ok) return;

  const width = Number(await response.text());
  form.width.value = width;
  document.getElementById('p1').value = width;

  if (width < 200) {
    setTimeout(updateProgress, 1000);
  }
}

If you have studied the Ajax basic tutorials then this is not so difficult to understand. We will try to develop a progress bar which takes the inputs from a php file ( server side script ) and display the result.

Here we will use two files, one is out html file with Ajax and JavaScript code and the other file is server side PHP script. The server side php file will only receive one data and it will increase the value by 20 and return the same value back to the html file.

DEMO of Progress Bar

Displaying the progress bar

To display a progressing bar we will use one small image of fixed height and width. The width we will change ( or increase ) based on the data we receive from the php file by Ajax. This is the code we will keep inside the div tag to display the progress bar.

<div id="txtHint"><img src=bar.gif height=10 width=10></div>

The width we have kept here is 10 but on each stage we will increase the width to 20, 40, 60 like that till it reaches the value 200.

Displaying progress by using progress tag ( HTML5)

In HTML5 we have progress tag. The value attributes of this progress tag can be managed by using JavaScript. Here is the line which we will be adding to manage the value attribute.

document.getElementById("p1").value= width;

This is the line of code used to display progress tag.

<progress value="0" max="200" id=p1>50%</progress>

Repeating the code at particular interval

At a particular interval we will post the existing width data and get back the new width from the PHP file. To execute the ajax code in a interval we will use one recursive timer in JavaScript. The code is here.

function timer(){
ajaxFunction();
if(myForm.width.value<200){
setTimeout(timer,1000);
}
}

In this code, ajaxFunction() runs once per second while the width is less than 200.

Our server side PHP code.

There is nothing much in this code. We will only receive the existing width value and then increase by 20 and then return.

<?php
header('Content-Type: text/plain; charset=UTF-8');
$width = filter_var($_POST['width'] ?? null, FILTER_VALIDATE_INT, [
  'options' => ['min_range' => 0, 'max_range' => 200]
]);
if ($width === false) {
  http_response_code(400);
  echo 'Invalid width';
  exit;
}
echo min(200, $width + 20);
?>

In our form we will keep one hidden field to store the width value. Here is our form part.

<form name="myForm" onsubmit="timer(); return false">
<input type=hidden name=width value=20>
<input type=submit value=Start>
</form>

<div id="txtHint"><img src=images/bar.gif height=10 width=10></div>
<br><br>
<progress value="0" max="200" id=p1>50%</progress>

Here is a complete browser-side version using the same Fetch contract shown above. It updates the HTML5 progress element directly and avoids rebuilding markup with innerHTML.

<form id="progressForm">
  <input type="hidden" name="width" value="20">
  <button type="submit">Start</button>
</form>
<progress value="0" max="200" id="p1"></progress>
<span id="progressText">0</span>

<script>
const form = document.getElementById('progressForm');
const progress = document.getElementById('p1');
const progressText = document.getElementById('progressText');

async function updateProgress() {
  const body = new URLSearchParams({ width: form.elements.width.value });
  const response = await fetch('progress-bar.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body
  });
  if (!response.ok) return;

  const width = Number(await response.text());
  form.elements.width.value = width;
  progress.value = width;
  progressText.textContent = String(width);

  if (width < 200) setTimeout(updateProgress, 1000);
}

form.addEventListener('submit', (event) => {
  event.preventDefault();
  form.elements.width.value = 20;
  progress.value = 0;
  updateProgress();
});
</script>

Same way here is our progressbar.php file.

<?php
header('Content-Type: text/plain; charset=UTF-8');
$width = filter_var($_POST['width'] ?? null, FILTER_VALIDATE_INT, [
  'options' => ['min_range' => 0, 'max_range' => 200]
]);
if ($width === false) {
  http_response_code(400);
  echo 'Invalid width';
  exit;
}
echo min(200, $width + 20);
?>

The progress bar displayed here is not reflection of actual script execution process. Read more on a simulated situation.
progress bar gives the feedback of different stages of actual execution
Ajax Json XML

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: