Vertical

Overview

This example will run two progress meter at same time on the same page.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The vertical (line 14) progress bar on left side, identify as PB1 (line 15) wait 100ms (line 16) between each step of 10% (line 17).

The vertical (line 33) progress bar on right side, identify as PB2 (line 34) wait 80ms (line 35) between each step of 5% (line 36).

There are 15 cells (line 19) for PB1, and also 15 cells (line 39) for PB2 with :

Property Value Default
active-color (PB1) #970038 #006600
active-color (PB2) #3874B4 #006600
inactive-color #FFDDAA #CCCCCC
width 50 20
height 13 15
spacing   2
See also :

PB1 is surrounded by a thin 1 pixel border (lines 23-24), while PB2 is surrounded by a 1 pixel dashed border (lines 41-42):

Property Value Default
class   progressBorder%s
width 1 0
style (PB1)   solid
style (PB2) dashed solid
color   #000000
See also :

And the percent text info are center aligned on bottom (lines 25-30, 43-48) of both progress bar :

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

Source Code

  1. <?php
  2. /**
  3. * Multiple Vertical progress bar.
  4. *
  5. * @version    $Id: vertical.php,v 1.4 2006/05/24 08:42:15 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. $pb1 = new HTML_Progress2();
  14. $pb1->setOrientation(HTML_PROGRESS2_BAR_VERTICAL);
  15. $pb1->setIdent('PB1');
  16. $pb1->setAnimSpeed(100);
  17. $pb1->setIncrement(10);
  18. $pb1->setProgressAttributes('position=absolute top=5 left=30');
  19. $pb1->setCellCount(15);
  20. $pb1->setCellAttributes('
  21. active-color=#970038 inactive-color=#FFDDAA width=50 height=13
  22. ');
  23. $pb1->setBorderPainted(true);
  24. $pb1->setBorderAttributes('width=1');
  25. $pb1->setLabelAttributes('pct1', array(
  26.     'font-size' => 8,
  27.     'color' => '#FF0000',
  28.     'align' => 'center',
  29.     'top' => 230
  30. ));
  31.  
  32. $pb2 = new HTML_Progress2();
  33. $pb2->setOrientation(HTML_PROGRESS2_BAR_VERTICAL);
  34. $pb2->setIdent('PB2');
  35. $pb2->setAnimSpeed(80);
  36. $pb2->setIncrement(5);
  37. $pb2->setFillWay('reverse');
  38. $pb2->setProgressAttributes('position=absolute top=5 left=120');
  39. $pb2->setCellCount(15);
  40. $pb2->setCellAttributes('active-color=#3874B4 inactive-color=#FFDDAA width=50 height=13');
  41. $pb2->setBorderPainted(true);
  42. $pb2->setBorderAttributes('width=1 style=dashed');
  43. $pb2->setLabelAttributes('pct1', array(
  44.     'font-size' => 8,
  45.     'color' => 'navy',
  46.     'align' => 'center',
  47.     'top' => 230
  48. ));
  49. ?>
  50. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  51.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  52. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  53. <head>
  54. <title>Multiple Vertical Progress2 example</title>
  55. <style type="text/css">
  56. <!--
  57. <?php
  58. echo $pb1->getStyle();
  59. echo $pb2->getStyle();
  60. ?>
  61.  
  62. body {
  63.     background-color: #C3C6C3;
  64. }
  65.  
  66. div.container {
  67.     position: absolute;
  68.     left: 40px;
  69.     top: 80px;
  70.     width: 210px;
  71.     height: 250px;
  72.     border: 4px;
  73.     border-color: navy;
  74.     border-style: dotted;
  75. }
  76.  -->
  77. </style>
  78. <?php echo $pb1->getScript(false); ?>
  79. </head>
  80. <body>
  81.  
  82. <div class="container">
  83. <?php
  84. $pb1->display();
  85. $pb2->display();
  86. ?>
  87. </div>
  88.  
  89. <?php
  90. do {
  91.     if ($pb2->getPercentComplete() == 1) {
  92.         break;
  93.     }
  94.     if ($pb1->getPercentComplete() < 1) {
  95.         $pb1->process();
  96.         $pb1->moveNext();
  97.     }
  98.     $pb2->process();
  99.     $pb2->moveNext();
  100. } while(1);
  101. ?>
  102.  
  103. </body>
  104. </html>