BlueSand

Overview

This example will run a natural horizontal progress bar with blue skin.
It will also show you how to simulate percent text info outside the progress bar cell group, delimited by a thin border.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

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 10x20 (line 16):

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

Surrounded by a thin 1 pixel border (lines 17-18):

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

And the percent text info is aligned on right of the progress bar (line 19), outside the cells group:

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

Source Code

  1. <?php
  2. /**
  3. * Natural horizontal ProgressBar with blue skin.
  4. *
  5. * @version    $Id: bluesand.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('active-color=#3874B4 inactive-color=#EEEECC width=10');
  17. $pb->setBorderPainted(true);
  18. $pb->setBorderAttributes('width=1 color=navy');
  19. $pb->setLabelAttributes('pct1', array(
  20.     'width' => 60,
  21.     'font-size' => 14,
  22.     'align' => 'center'
  23. ));
  24. ?>
  25. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  26.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  27. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  28. <head>
  29. <title>BlueSand Progress2 example</title>
  30. <style type="text/css">
  31. <!--
  32. <?php echo $pb->getStyle(); ?>
  33.  
  34. body {
  35.     background-color: #EEEEEE;
  36. }
  37.  -->
  38. </style>
  39. <?php echo $pb->getScript(false); ?>
  40. </head>
  41. <body>
  42.  
  43. <?php
  44. $pb->display();
  45. $pb->run();
  46. ?>
  47.  
  48. </body>
  49. </html>