Progressbar (barre de progression avec affichage du pourcentage en cours)

Commenter

Contenu du snippet

Voici une fonction qui affiche dynamiquement une barre de progression avec le pourcentage en cours.

Le fichier qui contient les procédures du progressbar est "progressbar.php"

Mode d'utilisation dans votre script:

1/ charger le fichier : include ("progressbar.php");
2/ initialisation de la barre : Initialize(x,y,largeur,hauteur,'couleur bordure','couleur du pourcentage','couleur de la barre de progression');
3/ Insertion de ProgressBar($i); dans votre boucle:

Source / Exemple : 




                                                                                                • 

                                                                •  progressbar.php

<?php

  function Initialize($gauche,$haut,$largeur,$hauteur,$bord_col,$txt_col,$bg_col)
  {
   $tailletxt=$hauteur-10;
   echo '<div id="pourcentage" style="position:absolute;top:'.$haut;
   echo ';left:'.$gauche;
   echo ';width:'.$largeur.'px';
   echo ';height:'.$hauteur.'px;border:1px solid '.$bord_col.';font-family:Tahoma;font-weight:bold';
   echo ';font-size:'.$tailletxt.'px;color:'.$txt_col.';z-index:1;text-align:center;">0%</div>';

   echo '<div id="progrbar" style="position:absolute;top:'.($haut+1); //+1
   echo ';left:'.($gauche+1); //+1
   echo ';width:0px';
   echo ';height:'.$hauteur.'px';
   echo ';background-color:'.$bg_col.';z-index:0;"></div>';

  }
  function ProgressBar($indice)
  {
    echo "\n<script>";
    echo "document.getElementById(\"pourcentage\").innerHTML='".$indice."%';";
    echo "document.getElementById('progrbar').style.width=".($indice*2).";\n";
    echo "</script>";
    flush();  // explication : http://www.manuelphp.com/php/function.flush.php
  }

?>


                                                                                    • 

                                                                •  index.php


<html>
<body>
<?php

  include ("progressbar.php");
  
//Initialize(x,y,largeur,hauteur,'couleur bordure','couleur du pourcentage','couleur de la barre de progression');
  Initialize(50,60,200,30,'#000000','#FFCC00','#006699');  // initialisation de la barre de progression
  for ($i=0;$i<=100;$i++)
  {
  ProgressBar($i);   // réaffichage de la barre avec le nouvel indice
  //***********************
  // ici on mets notre code
  for ($j=0;$j<=100000;$j++)  {$p=1;} // dans cette exemple, j'ai une boucle de retardement
  //**************************
  }
?>
</body>
</html>

Conclusion :


Testé sur FireFox, IE6 .

Vous remarquerez que le code n'est pas entièrement paramètrable néanmoins je ferai des mises à jour selon vos commentaires..

Bonne continuation.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_frop01)