PHP css preloader not loading

Hi all,

I am developing a php progress bar so i can get to see how much of somthing they have till they reach their target dynamically, this is my attempt below to draw out a progress bar and see how far i am from my target,


function processbar($i,$e)
{
	//
	$width = round(($e / $i) * 100);
	$display = '<style type="text/css">';
	$display .= ' #progress {   display: block;   }';
	$display .= ' #bar {   display: inline;   width: '.$width.'px;   height: 10px; background-image:   }';
	$display .= ' span:before {   display: block;   content: "'.$_progress.'%";   }';
	$display .= '</style>'."\
";
	echo $display;
	flush();
	//
}
//
function progress_bar($_image, $_lenght)
{
	$display = '<style type="text/css">';
	$display .= '
	#bar
	{
		display: none;
		width: 0px;
		height: 10px;
	}';
	$display .= ' span:before
	{
		display: none; 
		content: "0%"; 
	}';
		$display .= '</style>';
		$display .= '<div id="progress">';
		$display .= ' <img id="bar" src="'.$_image.'" alt="Progressbar" title="Progressbar" />';
		$display .= ' <span id="percent_progress"></span>';
		$display .= '</div>';
		echo $display; 
	flush();
}
//
$max=1000;
$cexp=950;

for($i=1; $i>$max; $i++)
{
	echo "".$i."";
	for($e=1; $e>=$cexp; $e++)
	{
		//
		progress_bar('progress.gif', 200);
		echo progressbar($i,$e);
		//	
	}
}

What i am hopiing to achieve is have the current is the exact they have atm and how much they need remaining to go to the next level,

only problem is that its not working the way i am wanting to display the current amount of experience they have and how much they have left.

How can i achieve that with the code above can anyone help me to achieve the above,

Thanks,William

Neither of those for loops will ever run because the conditions (the middle part) are never true – $i starts at 1 which is not greater than 1000, and $e starts at 1 which is not greater than or equal to 950.

I don’t think you need a loop anyway. You just want to show a bar whose width is proportional to ($cexp / $max) right?

You can also pull all that CSS out of the code and into your page, and just use PHP to output an inline style for the width (style=“width: ##”) on the element.

yea i soon realised that i went ahead with another method of mine that did the trick its simply this


<html>
    <head>
      <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
      <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>
    
      <script type="text/javascript">
      $(document).ready(function(){
        $("#progressbar").progressbar({ value: 5});
      });
      </script>
    </head>
    <body style="font-size:62.5&#37;; width:169px;">
      
    <div id="progressbar"></div>
    
    </body>
    </html>

It all works now thanks for the help anyway mate,