Percent (rel)

Overview

This example will run a basic progress bar with default label (percent info), using the relative position.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The percent label added by default is pct1 and is right side aligned on the progress bar :

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

Source Code

  1. <?php
  2. /**
  3. * Basic Horizontal ProgressBar
  4. * with a simple percent label on right side (using relative position).
  5. *
  6. * @version    $Id: percent1.php,v 1.4 2006/05/24 08:45:07 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_Progress2
  9. * @subpackage Examples
  10. * @access     public
  11. */
  12. require_once 'HTML/Progress2.php';
  13.  
  14. $pb = new HTML_Progress2();
  15. $pb->setAnimSpeed(300);
  16. $pb->setIncrement(10);
  17. ?>
  18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  19.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  20. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  21. <head>
  22. <title>Percent Label relative Progress2 example</title>
  23. <style type="text/css">
  24. <!--
  25. <?php echo $pb->getStyle(); ?>
  26.  
  27. body {
  28.     background-color: #E0E0E0;
  29.     color: #000000;
  30.     font-family: Verdana, Arial;
  31. }
  32.  -->
  33. </style>
  34. <?php echo $pb->getScript(false); ?>
  35. </head>
  36. <body>
  37. <p style="background-color:orange;
  38.           width:400px;height:200px;
  39.           text-align:center;">
  40. 400x200</p>
  41. <h1>Percent Label using relative position </h1>
  42. <p>Default behaviour.</p>
  43.  
  44. <?php
  45. $pb->display();
  46. $pb->run();
  47. $pb->hide();
  48. ?>
  49.  
  50. <p>Process Ended !</p>
  51.  
  52. </body>
  53. </html>