Ancestor

Overview

This example will run a basic horizontal progress bar in version 0.5 style.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The progress meter wait 200ms (line 14) between each step of 10% (line 15).

There are 10 cells with default values:

Property Value Default
active-color   #006600
inactive-color   #CCCCCC
width   15
height   20
spacing   2
See also :

And the progress bar percent info (default is pct1 identifier) is centered on a white background area of 60 pixels width (lines 16-24):

Property Value Default
class   progressPercentLabel%s
width 60 50
height 24 0
font-size 14 11
font-family   Verdana, Tahoma, Arial
font-weight   normal
color   #000000
background-color    
align center right
valign   right
See also :

Source Code

  1. <?php
  2. /**
  3. * Basic Horizontal ProgressBar version 0.5 style.
  4. *
  5. * @version    $Id: ancestor.php,v 1.4 2006/05/24 08:47:05 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11. require_once 'HTML/Progress2.php';
  12.  
  13. $pb = new HTML_Progress2();
  14. $pb->setAnimSpeed(200);
  15. $pb->setIncrement(10);
  16. $pb->setLabelAttributes('pct1', array(
  17.     'width' => 60,
  18.     'height' => 24,
  19.     'top' => 0,
  20.     'left' => 0,
  21.     'background-color' => '#FFFFFF',
  22.     'font-size' => 14,
  23.     'align' => 'center'
  24.     ));
  25. ?>
  26. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  27.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  28. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  29. <head>
  30. <title>Ancestor Progress2 example</title>
  31. <style type="text/css">
  32. <!--
  33. <?php echo $pb->getStyle(); ?>
  34.  
  35. body {
  36.     background-color: #444444;
  37. }
  38.  -->
  39. </style>
  40. <?php echo $pb->getScript(false); ?>
  41. </head>
  42. <body>
  43.  
  44. <?php
  45. $pb->display();
  46. $pb->run();
  47. ?>
  48.  
  49. </body>
  50. </html>