All

Overview

This example will run multiple progress bars on the same page.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

Explains step by step

The first progress bar (lines 34-42):

Property Value Default
left 50 10
top 55 25
width 40 300
height 270 25
padding 2 0
min  0
max 220 100

Is filled down (line 42), and then filled up later (line 97).

This progress bar (pbl1) has a percent label (lines 39,40-41).

The second progress bar (lines 45-55):

Property Value Default
left 120 10
top 50 25
width 40 300
height  25
padding  0
min  0
max  100
border-width 2 1
border-color #660066#000000
border-style   solid
color #6699FF#0033FF
background-color#000000#C0C0C0

This progress bar (pbl2) has a crossbar label (lines 53,54-55).

The third progress bar (lines 58-66):

Property Value Default
left 120 10
top 120 25
width 400 300
height 70 25
padding  0
min  0
max  100
border-width   1
border-color   #000000
border-style   solid
color #FF6633#0033FF
background-coloryellow #C0C0C0

This progress bar (pbl3) has a text label (lines 65-66).

The last progress bar (lines 69-84):

Property Value Default
left 120 10
top 220 25
width 600 300
height 100 25
padding  0
min 50 0
max 150 100
border-width 0 1
border-color   #000000
border-style   solid
color #CCCC66#0033FF
background-color#66CCFF#C0C0C0

This progress bar (pbl4) has a percent label (lines 79,80-84).

Source Code

  1. <!--
  2.   Demonstration of all the features of Progress2_Lite
  3.   version of Progress2 without any dependencies
  4.  
  5.   @version    $Id: liteall.php,v 1.4 2006/05/24 08:43:43 farell Exp $
  6.   @author     Laurent Laville <pear@laurent-laville.org>
  7.   @package    HTML_Progress2
  8.   @subpackage Examples
  9.   @access     public
  10. // -->
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  12.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  14. <head>
  15. <title>Progress2 Lite - Full features </title>
  16. </head>
  17. <body>
  18. <?php
  19. require_once 'HTML/Progress2_Lite.php';
  20.  
  21. /**
  22. * NOTE: The function {@link http://www.php.net/manual/en/function.usleep.php}
  23. *       did not work on Windows systems until PHP 5.0.0
  24. */
  25. function _sleep($usecs)
  26. {
  27.     if ((substr(PHP_OS, 0, 3) == 'WIN') && (substr(PHP_VERSION,0,1) < '5') ){
  28.         for ($i=0; $i<$usecs; $i++) { }
  29.     } else {
  30.         usleep($usecs);
  31.     }
  32. }
  33.  
  34. $opt1 = array('left' => 50, 'top' => 50, 'width' => 40, 'height' => 270,
  35.     'padding' => 2,
  36.     'max' => 220
  37. );
  38. $pbl1 = new HTML_Progress2_Lite($opt1);
  39. $pbl1->addLabel('percent','pct1');
  40. $pct1 = array('left' => 50, 'top' => 35, 'width' => 40);
  41. $pbl1->setLabelAttributes('pct1', $pct1);
  42. $pbl1->setDirection('down');
  43. $pbl1->display();
  44.  
  45. $opt2 = array('left' => 120, 'top' => 50, 'height' => 40);
  46. $pbl2 = new HTML_Progress2_Lite($opt2);
  47. $pbl2->setBarAttributes(array(
  48.     'border-width' => 2,
  49.     'border-color' => '#660066',
  50.     'color' => '#6699FF',
  51.     'background-color' => '#000000'
  52. ));
  53. $pbl2->addLabel('crossbar','crt1');
  54. $crt1 = array('left' => 120, 'top' => 30);
  55. $pbl2->setLabelAttributes('crt1', $crt1);
  56. $pbl2->display();
  57.  
  58. $opt3 = array('left' => 120, 'top' => 120, 'width' => 400, 'height' => 70);
  59. $pbl3 = new HTML_Progress2_Lite($opt3);
  60. $pbl3->setBarAttributes(array(
  61.     'color' => '#FF6633',
  62.     'background-color' => 'yellow'
  63. ));
  64. $pbl3->setDirection('left');
  65. $pbl3->addLabel('text','txt1');
  66. $pbl3->setLabelAttributes('txt1', array('color' => 'orange'));
  67. $pbl3->display();
  68.  
  69. $opt4 = array('left' => 120, 'top' => 220, 'width' => 600, 'height' => 100,
  70.     'min' => 50,
  71.     'max' => 150
  72. );
  73. $pbl4 = new HTML_Progress2_Lite($opt4);
  74. $pbl4->setBarAttributes(array(
  75.     'border-width' => 0,
  76.     'color' => '#CCCC66',
  77.     'background-color' => '#66CCFF'
  78. ));
  79. $pbl4->addLabel('percent','pct1');
  80. $pct1 = array('left' => 120, 'top' => 220, 'width' => 600, 'height' => 100,
  81.     'align' => 'center',
  82.     'font-size' => 78
  83. );
  84. $pbl4->setLabelAttributes('pct1', $pct1);
  85. $pbl4->display();
  86.  
  87. @set_time_limit(300);
  88.  
  89. for($i=1; $i<=220; $i++) {
  90.     $pbl1->moveStep($i);
  91.     if ($i==50) {$pbl2->hide();}
  92.     if ($i==100) {$pbl3->hide();}
  93.     if ($i==200) {$pbl4->hide();}
  94.     _sleep(10000);
  95. }
  96. $pbl1->moveMin();
  97. $pbl1->setDirection('up');
  98.  
  99. $pbl2->show();
  100. for($i=1; $i<=100; $i++) {
  101.     $pbl2->moveStep($i);
  102.     $crt1 = array('left' => ($i * 3) + 120, 'top' => 30,
  103.         'width' => 10, 'height' => 0,
  104.         'align' => 'center');
  105.     $pbl2->setLabelAttributes('crt1', $crt1);
  106.     $pbl2->setBarAttributes(array(
  107.         'color' => '#00'.dechex(100-$i+100).dechex($i+80)
  108.     ));
  109.     $pbl1->moveNext();
  110.     _sleep(100000);
  111. }
  112. $pbl2->setLabelAttributes('crt1', array('value' => ''));
  113.  
  114. $pbl3->show();
  115. $pbl3->setLabelAttributes('txt1', array('value' => 'searching ...'));
  116. for($i=1; $i<=100; $i++) {
  117.     if($i==30) {
  118.         $pbl3->setLabelAttributes('txt1', array('value' => 'loading ...'));
  119.     }
  120.     if($i==60) {
  121.         $pbl3->setLabelAttributes('txt1', array('value' => 'writing ...'));
  122.     }
  123.     $pbl3->moveStep($i);
  124.     $pbl1->moveNext();
  125.     _sleep(100000);
  126. }
  127. $pbl3->setLabelAttributes('txt1', array('value' => 'complete'));
  128.  
  129. $pbl4->show();
  130. for($i=50; $i<=150; $i+=5) {
  131.     $pbl4->moveStep($i);
  132.     $pbl1->moveNext();
  133.     sleep(1);
  134. }
  135. ?>
  136. </body>
  137. </html>