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

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
<?php
/**
* Natural horizontal ProgressBar with blue skin.
*
* @version $Id: bluesand.php,v 1.4 2006/05/24 08:47:05 farell Exp $
* @author Laurent Laville <pear@laurent-laville.org>
* @package HTML_Progress2
* @subpackage Examples
* @access public
*/
require_once 'HTML/Progress2.php';
$pb = new HTML_Progress2();
$pb->setAnimSpeed(200);
$pb->setIncrement(10);
$pb->setCellAttributes('active-color=#3874B4 inactive-color=#EEEECC width=10');
$pb->setBorderPainted(true);
$pb->setBorderAttributes('width=1 color=navy');
$pb->setLabelAttributes('pct1', array(
'width' => 60,
'font-size' => 14,
'align' => 'center'
));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>BlueSand Progress2 example</title>
<style type="text/css">
<!--
<?php echo $pb->getStyle(); ?>
body {
background-color: #EEEEEE;
}
-->
</style>
<?php echo $pb->getScript(false); ?>
</head>
<body>
<?php
$pb->display();
$pb->run();
?>
</body>
</html>