Percent (abs)

Overview

This example will run a basic progress bar with default label (percent info), using the absolute position.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The percent label added by default pct1 is right side aligned on the progress bar (lines 22-23) :

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

Position the progress bar with main attributes (lines 17-21):

Property Value Default
position absolute relative
left 350 0
top 100 0
See also :

Source Code

  1. <?php
  2. /**
  3. * Basic Horizontal ProgressBar
  4. * with a simple percent label on right side (using absolute position).
  5. *
  6. * @version    $Id: percent2.php,v 1.4 2006/05/24 08:45:07 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. $pb = new HTML_Progress2();
  15. $pb->setAnimSpeed(300);
  16. $pb->setIncrement(10);
  17. $pb->setProgressAttributes(array(
  18.     'position' => 'absolute',
  19.     'left' => 350,
  20.     'top' => 100)
  21. );
  22. $pct1 = array('width' => 0, 'left' => 180);
  23. $pb->setLabelAttributes('pct1', $pct1);
  24. ?>
  25. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  26.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  27. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  28. <head>
  29. <title>Percent Label absolute Progress2 example</title>
  30. <style type="text/css">
  31. <!--
  32. <?php echo $pb->getStyle(); ?>
  33.  
  34. body {
  35.     background-color: #E0E0E0;
  36.     color: #000000;
  37.     font-family: Verdana, Arial;
  38. }
  39.  -->
  40. </style>
  41. <?php echo $pb->getScript(false); ?>
  42. </head>
  43. <body>
  44. <p style="background-color:orange;
  45.           width:400px;height:200px;
  46.           text-align:center;">
  47. 400x200</p>
  48. <h1>Percent Label using absolute position </h1>
  49. <p>Progress bar is positionned at coordinates x=350, y=100</p>
  50.  
  51. <?php
  52. echo $pb->toHtml();
  53. $pb->run();
  54. $pb->hide();
  55. ?>
  56.  
  57. <p>Process Ended !</p>
  58.  
  59. </body>
  60. </html>