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

PHP >= 4.2.0
PEAR::HTML_Progress2 >= 2.0.0
PEAR::HTML_Common >= 1.2.1
PEAR::PHP_Compat >= 1.4.1
PEAR::Event_Dispatcher >= 0.9.1

And also but optional :

PEAR >= 1.3.5

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

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

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

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>

Laurent-Laville.org