Basic Indeterminate

Overview

This example will run a basic progress bar in indeterminate mode (without monitor)
Until it reaches a limit (elapse time > 12 seconds). Then the progress bar will switch in determinate mode (default) and finish a full loop from 0 to 100% by step +5.

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 48) between each step (line 49) in indeterminate mode. This mode is activated on line 53.

Background of progress bar is changed (line 50):

Property Value Default
class   progressBar
background-color #E0E0E0 #FFFFFF
auto-size   true
See also :

There are 10 cells with :

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

And the percent text info (line 52) when progress meter will be in determinate mode:

Property Value Default
id   installationProgress
width   50
font-family   Verdana, Arial, Helvetica, sans-serif
font-size   12
color #996 #000000
background-color #CCCC99#FFFFFF
align   right
valign   right
See also :

Source Code

  1. <?php
  2. /**
  3. * Horizontal progress bar in indeterminate mode
  4. * without using the Progress2_Monitor solution.
  5. *
  6. * @version    $Id: half.php,v 1.4 2006/05/24 08:45:38 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. /**
  15. *  The progress bar will switch from indeterminate to determinate mode
  16. *  after a 12 seconds time elapsed.
  17. *
  18. *  @param int     $pValue   current value of the progress bar
  19. *  @param object  $pBar     the progress bar itself
  20. */
  21. function myProgressHandler($pValue, &$pBar)
  22. {
  23.     static $c, $t;
  24.  
  25.     if (!isset($c)) {
  26.         $c = time();
  27.         $t = 0;
  28.     }
  29.  
  30.     $pBar->sleep();
  31.  
  32.     if ($pBar->isIndeterminate()) {
  33.         $elapse = time() - $c;
  34.  
  35.         if ($elapse > $t) {
  36.             echo "myProgressHandler -> elapse time = $elapse s.<br />\n";
  37.             $t++;
  38.         }
  39.         if ($elapse >= 12) {
  40.             $pBar->setIndeterminate(false);
  41.             $pBar->setValue(0);
  42.             $pBar->setIncrement(5);
  43.         }
  44.     }
  45. }
  46.  
  47. $pb = new HTML_Progress2();
  48. $pb->setAnimSpeed(200);
  49. $pb->setIncrement(10);
  50. $pb->setProgressAttributes('background-color=#E0E0E0');
  51. $pb->setCellAttributes('active-color=#996');
  52. $pb->setLabelAttributes('pct1', array('color' => '#996'));
  53. $pb->setIndeterminate(true);
  54. $pb->setProgressHandler('myProgressHandler');
  55. ?>
  56. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  57.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  58. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  59. <head>
  60. <title>Half Indeterminate Progress2 example</title>
  61. <style type="text/css">
  62. <!--
  63. body {
  64.     background-color: #CCCC99;
  65.     color: #996;
  66.     font-family: Verdana, Arial;
  67. }
  68.  
  69. <?php echo $pb->getStyle(); ?>
  70.  -->
  71. </style>
  72. <?php echo $pb->getScript(false); ?>
  73. </head>
  74. <body>
  75.  
  76. <?php
  77. $pb->display();
  78. echo '<br /><br />';
  79. $pb->run();
  80. ?>
  81. <p><b>Process Ended !</b></p>
  82.  
  83. </body>
  84. </html>