Mobilefish.com - Div example 3

<html>
<head>
  <title>Div example</title>
  
  <style type="text/css"> 
  .progress {
    width: 501px;
    top: 60px;
    float: left;
    padding: 1px;
    left: 10px;
    position: absolute;
  }
  
  .bar {
    height: 28px;
    background: #00ff00;
    border: 1px solid #000000;  
  }
  
  .blocks {
    height: 26px;
    width: 5px;
    top: 61px; /* .progress top + 1px */
    background: #0000ff;
    border: 1px solid #ffffff;
  }
  
  .percentage {
    background: #ffffff;  /* Do not remove, this will clear the values */
    height: 28px;
    position:absolute;
    left: 525px; /* progress width + progress left + 14px */
    top: 63px;  /* .progress top + 3px */
    width: 40px;
    font-size: 10pt; 
    font-family: Verdana, Arial, sans-serif; 
    color: #0000ff;
    font-weight: bold;
  } 
  </style>
</head>
<body>


<?php

if (ob_get_level() == 0) {
   ob_start();
}

$loopsize=20;   /* play with the loopsize, enter different values */

$step = round(100/$loopsize);
  
$left_distance = 12; // same as div.progress left + 2px;

for ($i = 1; $i <= $loopsize; $i++) {
  $percentage = $i * $step; 
  // Due to rounding
  if ($percentage > 100) {
    $percentage = 100;
  } 
  // Due to rounding
  if ($i==$loopsize && $percentage < 100) {
    $percentage = 100;
  }  
  echo '<div class="percentage">' . $percentage . '%</div>';  
  echo '<div class="progress bar"></div>';

  // percentage divided by 2 means max 50 blocks are used.
  $max_blocks = round($percentage/2);
  for($j=0; $j< $max_blocks; $j++) {
     // 10 is the pixel width of a block
     $d = $j * 10 + $left_distance;
     // do not remove the &nbsp;
     echo '<div class="progress blocks" style="left: '.$d.'px"> </div>';
  }

  flush();
  ob_flush();
  sleep(1);
}
ob_end_flush();
?>

</body>
</html>