VLimit

Overview

This example will run a basic vertical progress bar, beginning at 75%, and increased through 100% by +1 step.

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 15) between each step of 1% (default), and start at 75% (line 16).

Orientation vertical (default is horizontal) is given on line 14.

Percent info is right align in middle of progress bar on line 17 (top shift).

There are 10 cells with default values:

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

Source Code

  1. <?php
  2. /**
  3. * Basic vertical progress bar.
  4. *
  5. * @version    $Id: vlimit.php,v 1.4 2006/05/24 08:39:13 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->setOrientation(HTML_PROGRESS2_BAR_VERTICAL);
  15. $pb->setAnimSpeed(200);
  16. $pb->setValue(75);
  17. $pb->setLabelAttributes('pct1', array('top' => 80));
  18. ?>
  19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  20.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  21. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  22. <head>
  23. <title>VLimit Progress2 example</title>
  24. <style type="text/css">
  25. <!--
  26. <?php echo $pb->getStyle(); ?>
  27.  
  28. body {
  29.     background-color: #FFFFFF;
  30. }
  31.  -->
  32. </style>
  33. <?php echo $pb->getScript(false); ?>
  34. </head>
  35. <body>
  36.  
  37. <?php
  38. $pb->display();
  39. $pb->run();
  40. ?>
  41.  
  42. </body>
  43. </html>