I am trying to make a simple loader bar, that will update as a PHP loop runs through its processes. The simple code is below, my issue is the php loop loads completely before loading the bar to 100%. For example I run the script the page loads and it shoots to 100% where as it supposed to go 10% 20% 30% etc. Is there a way to force the output during my PHP loop?
<!DOCTYPE html>
<html>
<style>
#ProgressBar {
width: 100%;
background-color: #ddd;
}
#BarColour {
width: 0%;
height: 30px;
background-color: #4CAF50;
}
</style>
<body>
<h1>Progress Bar</h1>
<div id="ProgressBar">
<div id="BarColour"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
function move(amount) {
var elem = document.getElementById("BarColour");
elem.style.width = amount + '%';
}
</script>
<?php
for ($x = 1; $x <= 10; $x++) {
Sleep(0.4);
$counter = $x *10;
echo "<script>move($counter)</script>";
}
?>
</body>
</html>
Thanks in advance Eddie
