PHP进度栏-使用CSS3或jQuery向其中添加一些动画

Question

I implemented the php progress bar on this link: http://w3shaman.com/article/php-progress-bar-script but I would like to add some animation to it. I would like the progress bar width to increase smoothly. I tried CSS3 (transition effect) but is does not work. Any idea how animation can be added using CSS3 or jQuery ?

Here is the code:

<div id="progress" style="width:500px;border:1px solid #ccc; transition: width 1s ease-in-out;"></div>
<div id="information" style="width"></div>
<?php

$total = 15;

for($i=1; $i<=$total; $i++){
  // Calculate the percentation
  $percent = intval($i/$total * 100)."%";

  // Javascript for updating the progress bar and information
  echo '<script language="javascript">
   document.getElementById("progress").innerHTML=\'<div style="width:'.$percent.'; background-color:#ddd; transition: width 1s ease-in-out;">&nbsp</div>\' ;
  document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
  </script>';

  // This is for the buffer achieve the minimum size in order to flush data
  echo str_repeat(' ',1024*64);

  // Send output to browser immediately
  flush();

  // Sleep one second so we can see the delay
  sleep(1);
}

// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>

Answer 1

Maybe you can use jquery´s animate

Jquery Animate API

So in:

echo '<script language="javascript">
  document.getElementById("progress").innerHTML=\'<div style="width:'.$percent.'; background-color:#ddd; transition: width 1s ease-in-out;">&nbsp</div>\' ;
  document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
</script>';

you can add a call to the animate function to update the width for progress.

Example:

//HTML CODE, add the div to be animated inside the progress bar   
<div id="progress" style="width:500px;border:1px solid #ccc; transition: width 1s ease-in-out;">
 <div id="progressStyle" style="width:0%; background-color:#ddd; transition: width 1s ease-in-out;">&nbsp</div>
</div>

//PHP CODE
echo '<script language="javascript">

$( "#progressStyle" ).animate({
 width: '.$percent.'
 }, 500, function() {
 // Animation complete.
 });
</script>';