- //la classe (fichier class_progressbar.inc)
- <?php
-
- class ProgressBar{
-
- //----------------- parameters -----------------
- // position parameters
- var $top=60;
- var $left=50;
- var $width=200;
- var $height=30;
-
- //color parameters
- var $border_color='#000000';
- var $percent_color='#FFCC00';
- var $txt_color='#000000';
- var $background_color='#006699';
-
- //size parameters;
- var $percent_size=15;
- var $txt_size=15;
-
- //html parameter
-
- //----------------- private functions -----------------
- function Hide(){
- echo '<script>';
- echo 'document.getElementById("myprogressbar").style.display="none";';
- echo "</script>";
- }
-
- //----------------- public functions -----------------
- function setPosition($left,$top, $width, $height){
- $this->top=$top;
- $this->left=$left;
- $this->width=$width;
- $this->height=$height;
- }
-
- function setColors($border_color,$percent_color,$txt_color,$background_color){
- $this->border_color=$border_color;
- $this->percent_color=$percent_color;
- $this->txt_color=$txt_color;
- $this->background_color=$background_color;
- }
-
- function setSizes($percent_size, $txt_size){
- $this->percent_size=$percent_size;
- $this->txt_size=$txt_size;
- }
-
- function generateHTML(){
- $html='<div id="myprogressbar" style="display:block;position:absolute;top:'.$this->top;
- $html.=';left:'.$this->left;
- $html.=';width:'.$this->width.'px;">';
-
- //progress bar div
- $html.='<div id="progrbar" style="position: relative; top: 0px';
- $html.=';left: 1px';
- $html.=';width:0px';
- $html.=';height:'.$this->height.'px';
- $html.=';background-color:'.$this->background_color.';z-index:0;"></div>';
-
- //percent div
- $html.='<div id="percent" style="position:relative;top:-'.($this->height+1).'px';
- $html.=';left: 0px';
- $html.=';width: 100%';
- $html.=';height:'.$this->height.'px;border:1px solid '.$this->border_color.';font-family:Tahoma;font-weight:bold';
- $html.=';font-size:'.$this->percent_size.'px;color:'.$this->percent_color.';z-index:1;text-align:center;">0%</div>';
-
- //text div
- $txttop=$this->top+1+$this->height+1;
- $html.='<div id="progrbartxt" style="position:relative;top:-'.($this->height).'px';
- $html.=';left:0px';
- $html.=';width: 100%';
- $html.=';text-align:center';
- $html.=';font-size:'.$this->txt_size.'px;color:'.$this->txt_color.';z-index:1;text-align:center;">loading</div>';
-
- $html.='</div>';
- return $html;
- }
-
- function SetTimeOut($timeout){
- set_time_limit($timeout); //need safe mode off !
- }
-
- function SetPercent($percent, $text=""){
- echo '<script>';
- echo 'document.getElementById("percent").innerHTML="'.$percent.'%";';
- echo 'document.getElementById("progrbar").style.width="'.($percent*2).'";';
- if (!empty($text))
- {
- echo 'document.getElementById("progrbartxt").innerHTML="'.$text.'";';
- }
- echo '</script>';
- flush();
- }
-
- function End($hide=true){
- echo '<script>';
- echo 'document.getElementById("percent").innerHTML="100%";';
- echo 'document.getElementById("progrbar").style.width="200";\n';
- echo 'document.getElementById("progrbartxt").innerHTML="loaded !";';
- echo '</script>';
- flush();
- if (!empty($hide))
- $this->Hide();
- }
-
- }
- ?>
-
- //la page de test
- <html>
- <body>
- <?php
- include ('class_progressbar.inc');
- $pb=new ProgressBar;
-
- //optional
- $pb->setPosition(200, 50, 200, 20); //optionnal (default value are defined)
- $pb->setColors('#000000','#FFCC00','#FF0000','#006699'); ////optionnal (default value are defined)
- $pb->setSizes(15, 18);
- $pb->setTimeout(30);
-
- //generate html
- echo $pb->generateHTML();
-
- //simulate a "time consuming" task
- for ($i=0;$i<=100;$i++)
- {
- $pb->setPercent($i,'loading message');
- for ($j=0;$j<=100000;$j++) {$p=1;}
- $p=1;
- }
- //end the progress bar (and hide it when finished)
- $pb->End(); //or $pb->End(false) to avoid hidding progress bar
- ?>
- <div style="positon:relative">your document is now loaded !</div>
- </body>
- </html>
//la classe (fichier class_progressbar.inc)
<?php
class ProgressBar{
//----------------- parameters -----------------
// position parameters
var $top=60;
var $left=50;
var $width=200;
var $height=30;
//color parameters
var $border_color='#000000';
var $percent_color='#FFCC00';
var $txt_color='#000000';
var $background_color='#006699';
//size parameters;
var $percent_size=15;
var $txt_size=15;
//html parameter
//----------------- private functions -----------------
function Hide(){
echo '<script>';
echo 'document.getElementById("myprogressbar").style.display="none";';
echo "</script>";
}
//----------------- public functions -----------------
function setPosition($left,$top, $width, $height){
$this->top=$top;
$this->left=$left;
$this->width=$width;
$this->height=$height;
}
function setColors($border_color,$percent_color,$txt_color,$background_color){
$this->border_color=$border_color;
$this->percent_color=$percent_color;
$this->txt_color=$txt_color;
$this->background_color=$background_color;
}
function setSizes($percent_size, $txt_size){
$this->percent_size=$percent_size;
$this->txt_size=$txt_size;
}
function generateHTML(){
$html='<div id="myprogressbar" style="display:block;position:absolute;top:'.$this->top;
$html.=';left:'.$this->left;
$html.=';width:'.$this->width.'px;">';
//progress bar div
$html.='<div id="progrbar" style="position: relative; top: 0px';
$html.=';left: 1px';
$html.=';width:0px';
$html.=';height:'.$this->height.'px';
$html.=';background-color:'.$this->background_color.';z-index:0;"></div>';
//percent div
$html.='<div id="percent" style="position:relative;top:-'.($this->height+1).'px';
$html.=';left: 0px';
$html.=';width: 100%';
$html.=';height:'.$this->height.'px;border:1px solid '.$this->border_color.';font-family:Tahoma;font-weight:bold';
$html.=';font-size:'.$this->percent_size.'px;color:'.$this->percent_color.';z-index:1;text-align:center;">0%</div>';
//text div
$txttop=$this->top+1+$this->height+1;
$html.='<div id="progrbartxt" style="position:relative;top:-'.($this->height).'px';
$html.=';left:0px';
$html.=';width: 100%';
$html.=';text-align:center';
$html.=';font-size:'.$this->txt_size.'px;color:'.$this->txt_color.';z-index:1;text-align:center;">loading</div>';
$html.='</div>';
return $html;
}
function SetTimeOut($timeout){
set_time_limit($timeout); //need safe mode off !
}
function SetPercent($percent, $text=""){
echo '<script>';
echo 'document.getElementById("percent").innerHTML="'.$percent.'%";';
echo 'document.getElementById("progrbar").style.width="'.($percent*2).'";';
if (!empty($text))
{
echo 'document.getElementById("progrbartxt").innerHTML="'.$text.'";';
}
echo '</script>';
flush();
}
function End($hide=true){
echo '<script>';
echo 'document.getElementById("percent").innerHTML="100%";';
echo 'document.getElementById("progrbar").style.width="200";\n';
echo 'document.getElementById("progrbartxt").innerHTML="loaded !";';
echo '</script>';
flush();
if (!empty($hide))
$this->Hide();
}
}
?>
//la page de test
<html>
<body>
<?php
include ('class_progressbar.inc');
$pb=new ProgressBar;
//optional
$pb->setPosition(200, 50, 200, 20); //optionnal (default value are defined)
$pb->setColors('#000000','#FFCC00','#FF0000','#006699'); ////optionnal (default value are defined)
$pb->setSizes(15, 18);
$pb->setTimeout(30);
//generate html
echo $pb->generateHTML();
//simulate a "time consuming" task
for ($i=0;$i<=100;$i++)
{
$pb->setPercent($i,'loading message');
for ($j=0;$j<=100000;$j++) {$p=1;}
$p=1;
}
//end the progress bar (and hide it when finished)
$pb->End(); //or $pb->End(false) to avoid hidding progress bar
?>
<div style="positon:relative">your document is now loaded !</div>
</body>
</html>