Your first Progress Meter

first steps in the HTML_Progress World

We will start by creating a very simple progress meter. Copy the following code to a file, give it a .php extension, and display it in your browser.

code listing 2.1: a very simple progress meter

<?php
require_once 'HTML/Progress.php';
 
$bar = new HTML_Progress();
$bar->setAnimSpeed(50);
?>
<html>
<head>
<title>Code listing 2.1 </title>
<style type="text/css">
<!--
<?php echo $bar->getStyle(); ?>
// -->
</style>
<script type="text/javascript">
<!--
<?php echo $bar->getScript(); ?>
//-->
</script>
</head>
<body>
 
<?php 
echo $bar->toHtml(); 
$bar->run();
?>
 
</body>
</html>

Loading this file in your browser will simply show something like that after few seconds :

Not particulary exciting, but this does show that HTML_Progress is installed correctly and working. If it's not, have a look at the FAQ page to know if your problem is identified.

Let's consider the lines individually:

Line 2 loads the class definitions. Next (line 4) we instanciate an HTML_Progress object.

Line 5, we slow a bit the animation, to see something. By default animation speed is set to zero, and we can think in such case that the progress meter did not run, or just jump from 0 to 100 without doing nothing else. It's false!

Stylesheet produced by PEAR::HTML_CSS package is put between style html tags in line 12.

Javascript is put between script html tags in line 17.

In line 24, we produces all the html code necessary to display the progress meter.

Finally, the line 25 makes it happen. This display the horizontal progress bar and run it from 0% to 100%, one percent step by step.

Of course, in this example there isn't anything the user can do, so let's create a more complex example.