BullIt

Overview

This example will run a plain horizontal progress bar.

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 14) between each step of 10% (line 15).

There are 10 cells 20x20 collapsed (lines 16-21):

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

The progress bar has a 3dfx border (lines 22-23):

Property Value Default
class   progressBorder%s
width 1 0
style inset solid
color white #000000
See also :

And the percent text info is right aligned on top side of the progress bar (lines 24-30):

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

Source Code

  1. <?php
  2. /**
  3. * Horizontal plain progress bar.
  4. *
  5. * @version    $Id: bullit.php,v 1.4 2006/05/24 08:47:05 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->setAnimSpeed(200);
  15. $pb->setIncrement(10);
  16. $pb->setCellAttributes(array(
  17.     'active-color' => '#000084',
  18.     'inactive-color' => '#3A6EA5',
  19.     'width' => 20,
  20.     'spacing' => 0
  21. ));
  22. $pb->setBorderPainted(true);
  23. $pb->setBorderAttributes('width=1 style=inset color=white');
  24. $pb->setLabelAttributes('pct1', array(
  25.     'width' => 198,
  26.     'height' => 24,
  27.     'font-size' => 14,
  28.     'valign' => 'top',
  29.     'align' => 'right'
  30. ));
  31. ?>
  32. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  33.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  34. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  35. <head>
  36. <title>Bullit Progress2 example</title>
  37. <style type="text/css">
  38. <!--
  39. <?php echo $pb->getStyle(); ?>
  40.  
  41. body {
  42.     background-color: #C3C6C3;
  43. }
  44.  -->
  45. </style>
  46. <?php echo $pb->getScript(false); ?>
  47. </head>
  48. <body>
  49.  
  50. <?php
  51. $pb->display();
  52. $pb->run();
  53. ?>
  54.  
  55. </body>
  56. </html>