<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 echo '<div class="progress blocks" style="left: '.$d.'px"> </div>'; } flush(); ob_flush(); sleep(1); } ob_end_flush(); ?> </body> </html>