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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 72 005 fois - Téléchargée 28 fois

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

Ajouter un commentaire

Commentaires

Commenter la réponse de NeoZer0

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.