Sujet Précédent Sujet Suivant

Automatisation barre de progression JS

Résolu/Fermé
shoub-tcy Messages postés 169 Date d'inscription mardi 6 mars 2012 Statut Membre Dernière intervention 23 mai 2012 - 31 mars 2012 à 18:33
ach32 Messages postés 47 Date d'inscription mercredi 20 avril 2016 Statut Membre Dernière intervention 19 septembre 2017 - 6 oct. 2016 à 09:55
Bonjour,

J'ai un script avec une barre de progression de 20 secondes qui démarre grace à un bouton "show me", mais je voudrais que la progression démarre automatiquement dès le chargement de la page et non grace au bouton, mais je ne sais pas vraiment comment m'y prendre.
Voici mon script :

<!DOCTYPE html>
<html>
<head>
<title>Barre de progression</title>
<style type="text/css">
#empty
{
background-color: rgba(132,125,255,0.2);
border:1px solid rgb(231,179,58);
border-radius: 20px;
height:20px;
width:200px;
padding:0px;
}

#d2
{
position:relative;
top:0px;
left:0px;
background-color: rgba(71,62,255,0.7);
height:20px;
width:0px;
padding-top:5px;
padding:0px;
border-radius: 20px;
}

#d1
{
position:relative;
top:0px;
left:0px;
color:#f0ffff;
height:20px;
text-align:center;
font:bold;
padding:0px;
padding-top:5px;
border-radius: 20px;
}
</style>
<script type="text/javascript">
var i
function prog()
{
document.getElementById("d1").innerHTML=""; document.getElementById("d2").style.width=0; i=0;
progBar();
}

function progBar()
{
if (i<=(200))
{
if (i>0)
document.getElementById("d2").style.width=i+"px";
var j=0;
while (j<=100)
j++;
setTimeout("progBar();", 90);
i++;
}
}
</script>

<br><br><input type="button" onclick="prog();" value="Show Me"><br><br>

<center><br><br>
<div id="empty" align="left">
<div id="d2">
<div id="d1">
</div></div></div></center><br><br></div>
</center>

</body>
</html>
A voir également:

2 réponses

Réponse 1 / 2
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
Modifié par Atropa le 31/03/2012 à 18:51
bonjour,

il suffit d'appeler la fonction dans des balises script placées juste après la balise center 

[...]  
<center><br><br>  
<div id="empty" align="left">  
<div id="d2">  
<div id="d1">  
</div></div></div></center><br><br></div>  
</center>  
<script type="text/javascript">  
<!--  
        prog();  
//-->  
</script>  
</body>  
</html>


comme ceci
0
shoub-tcy Messages postés 169 Date d'inscription mardi 6 mars 2012 Statut Membre Dernière intervention 23 mai 2012 2
31 mars 2012 à 19:00
Merci d'avoir répondu Atropa,

C'est parfait merci pour ton conseil. C'est résolu !!
0
Réponse 2 / 2
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
Modifié par Atropa le 31/03/2012 à 20:46
pour ce qui est des animation je te conseil de les gérer autrement

l'utilisation du l'heure en milliseconde et de la fonction setInterval() permettent de gérer plus précisément la durée et le taux de rafraichissement et permettent d'avoir des animations plus fluide.

par contre il est plus difficile de modifier le cour de l'animation par des évènement extérieur

j'ai repris ton code pour te donner un exemple 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
 <title>Barre de progression</title>  
 <style type="text/css">  
 #empty {  
  background-color: rgba(132,125,255,0.2);  
  border: 1px solid rgb(231,179,58);  
  border-radius: 20px;  
  height: 20px;  
  width: 200px;  
  padding: 0px;  
  margin: auto;  
  margin-top: 25%;  
 }  

 #d2 {  
  position: absolute;  
  overflow: hidden;  
  clip: rect(0px,0px,20px,0px);  
  background-color: rgba(71,62,255,0.7);  
  height:20px;  
  width: 200px;  
  padding:0px;  
  border-radius: 20px;  
 }  

 </style>  
 <script type="text/javascript">  
 <!--  
  function mTimeStamp() {  
   var time = new Date();  
   time = Date.parse(time)+time.getMilliseconds()  
   return time;  
  }  
   
  function progBar() {  
   elm = document.getElementById('d2');  
   elm.timeStart = mTimeStamp();  
   var duree = 1000;  
   var valEnd = 200;  
   var valActu = 0;  
   elm.interval = setInterval(function() {  
    valActu = (mTimeStamp() - elm.timeStart) / duree * valEnd;  
    if(valActu > valEnd) valActu = valEnd;  
    elm.style.clip= 'rect(0px,' + valActu + 'px,20px,0px)';  
     if(valActu == valEnd) clearInterval(elm.interval);  
   },10);  
  }  
 //-->  
 </script>  
</head>  
<body>  

 <div id="empty">  
  <div id="d2"></div>  
 </div>  
 <script type="text/javascript">  
 <!--  
  progBar();  
 //-->  
 </script>  

</body>  
</html>
0
shoub-tcy Messages postés 169 Date d'inscription mardi 6 mars 2012 Statut Membre Dernière intervention 23 mai 2012 2
31 mars 2012 à 20:14
Merci!!
C'est encore mieux que ce que j'espérais :)
0
ach32 Messages postés 47 Date d'inscription mercredi 20 avril 2016 Statut Membre Dernière intervention 19 septembre 2017
6 oct. 2016 à 09:55
Bonjour j'ai le même problème avec la barre de chargement
En faisant des recherches sur internet pour avoir un tutoriel qui me permettrait de faire une barre de progression pendant l'opload d'un fichier en php,
je suis tombé sur un qui donne un cercle en rotation. Mais malheuresement je n'arrive pas à l'adapter à mon code.
Ma requète ($insertion) consiste à charger les informations d'un fichier txt dans ma base de données mysql, et celà peut prendre plusieurs minutes en fonction du nombre de ligne de mon fichier txt.
Comment faire pour la barre de chargement tourne pendant que ma requète est en cours d'exécution ?

Voici le code HTML qui contient le cercle en rotation: 

<section class="section section-2">
	<span class="loader loader-double"></span>
	Chargement du DIPE...
</section>



Voici le code css qui permet de faire tourner le cercle: 


body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;;
	font-size: 40px;
	color: #FFF;
	text-align: center;
}
.section{
	background-color: #16a085;
	height: 500px;
	line-height: 500px;
}

.loader{
	width: 50px;
	height: 50px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.loader-quart{
	border-radius: 50px;
	border: 6px solid rgba(255,255,255, 0.4); 
}
.loader-quart:after{
	content: '';
	position: absolute;
	top: -6px; 
	left: -6px;
	bottom: -6px;
	right: -6px;  
	border-radius: 50px;
	border: 6px solid transparent;
	border-top-color: #FFF;
	-webkit-animation: spin 1s linear infinite;
	animation:spin 1s linear 0s infinite;
}

@-webkit-keyframes spin{
	0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);

	}100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@keyframes spin{
	0%{transform: rotate(0deg); }
	100%{transform: rotate(360deg);}
}

.section-2{ background-color: #2980b9; }

.loader-double{
	border-radius: 50px;
	border: 6px solid transparent; 
	border-top-color: #FFF;
	border-bottom-color:#FFF; 
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;

}

.loader-double:after{
	content: '';
	position: absolute;
	top: 5px; 
	left: 5px;
	bottom: 5px;
	right: 5px;  
	border-radius: 50px;
	border: 6px solid transparent;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	opacity: 0.6;
	-webkit-animation: spin 1s linear infinite;
	animation:spin 1s linear infinite;
}


Voici le code php qui contient la requète $insertion: 

$recup_id = mysql_query(" SELECT id_employeur FROM employeur WHERE login_empl = '$login' ");
        $data_id = mysql_fetch_assoc($recup_id); 
        $id_employeur = $data_id['id_employeur']; $id_employeur = intval($id_employeur);



    if (isset($_POST['submit'])) {

    

    $fichier=$_FILES['fichier']['name'];
    move_uploaded_file($_FILES['fichier']['tmp_name'],"dipes/".$fichier);
 
    $fp = fopen('dipes/'.$fichier,'r'); //lecture du fichier  
    
    if ($fp) { 
    while (!feof($fp)){ //on parcourt toutes les lignes
        $ligne=fgets($fp); // lecture du contenu de la ligne

        $code=substr($ligne,0,3);              $code = str_pad($code, 3, " ", STR_PAD_LEFT);
        $num_dipe = substr($ligne,3,6);        $num_dipe = str_pad($num_dipe, 5, " ", STR_PAD_LEFT);
        $cle = substr($ligne,8,1);             $cle = str_pad($cle, 1, " ", STR_PAD_LEFT);
        $contrib = substr($ligne,9,14);        $contrib = str_pad($contrib, 14, " ", STR_PAD_LEFT);
        $mois = substr($ligne,23,2);           $mois = str_pad($mois, 2, " ", STR_PAD_LEFT);
        $matri_empl = substr($ligne,25,11);    $matri_empl = str_pad($matri_empl, 11, " ", STR_PAD_LEFT); 
        $regime = substr($ligne,36,1);         $regime = str_pad($regime, 1, " ", STR_PAD_LEFT);
        $annee = substr($ligne,37,4);          $annee = str_pad($annee, 4, " ", STR_PAD_LEFT);
        $matri_ass = substr($ligne,41,11);     $matri_ass = str_pad($matri_ass, 11, " ", STR_PAD_LEFT);
        $nbr_jr = substr($ligne,52,2);         $nbr_jr = str_pad($nbr_jr, 2, " ", STR_PAD_LEFT);
        $sal_brut = substr($ligne,54,10);      $sal_brut = str_pad($sal_brut, 10, " ", STR_PAD_LEFT);
        $sal_exep = substr($ligne,64,10);      $sal_exep = str_pad($sal_exep, 10, " ", STR_PAD_LEFT);
        $sal_tax = substr($ligne,74,10);       $sal_tax = str_pad($sal_tax, 10, " ", STR_PAD_LEFT);
        $sal_cot = substr($ligne,84,10);       $sal_cot = str_pad($sal_cot, 10, " ", STR_PAD_LEFT);
        $sal_plaf = substr($ligne,94,10);      $sal_plaf = str_pad($sal_plaf, 10, " ", STR_PAD_LEFT);
        $irpp = substr($ligne,104,8);          $irpp = str_pad($irpp, 8, " ", STR_PAD_LEFT);
        $taxe_com = substr($ligne,112,6);      $taxe_com = str_pad($taxe_com, 6, " ", STR_PAD_LEFT);
        $num_ligne = substr($ligne,118,2);     $num_ligne = str_pad($num_ligne, 2, " ", STR_PAD_LEFT);
        $matri_int = substr($ligne,120,14);    $matri_int = str_pad($matri_int, 14, " ", STR_PAD_LEFT);
        $noms = substr($ligne,134,60);         $noms = str_pad($noms, 60, " ", STR_PAD_LEFT);
        $date = date('d/m/Y');  

          echo "      <section class="section section-2">
					<span class="loader loader-double"></span>
					Chargement du DIPE...
					</section>
				"; 

           
        $insertion = mysql_query(" INSERT INTO tcompte_assure (id_employeur, codeenreg, noms,numdipe,clenumdipe,numero_contrib,moisdipe,anneedipe,matricule_empl,regime,numassure,nombrejour,salairebrut,salaireexeptionel,salairetaxable,salairecotcnps,salairecotplafonne,irpp,retenutaxecom,numligne,matriculeinterne,date_enreg) 
        VALUES ($id_employeur, '$code', '$noms', '$num_dipe', '$cle', '$contrib', '$mois', '$annee', '$matri_empl', '$regime', '$matri_ass', '$nbr_jr', '$sal_brut', '$sal_exep', '$sal_tax', '$sal_cot', '$sal_plaf', '$irpp', '$taxe_com', '$num_ligne', '$matri_int', '$date') ") or die(mysql_error()) ;
        
                if ($insertion) {  
                    $nettoyage = mysql_query("DELETE FROM tcompte_assure WHERE moisdipe = '' AND anneedipe = '' ");
                    ?>

                <script type="text/javascript"> window.location.href = "initialiser_dipe.php" ; </script>
            <?php    }else{   ?>
                    <script type="text/javascript"> window.location.href = "initialiser_dipe.php" ; </script>
            

            <?php    }
    }
          } 
    }
    ?>



Je voudrais que le cercle tourne pendant que la requete $insertion charge les informations dans la base de données.
A l'aide s'il vous plait
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
Alt + = un égal barré = différence !
KAPAZZA -
benj -

7 réponses
Comment faire le signe = barré?
rma71 -
gillette83 -

5 réponses
Comment écrire le signe mathématique "différent de"?
moillola -
ziggourat -

7 réponses
Quelle touche clavier ou combinaison pour désigner "différent de
Isismo -
abdo -

10 réponses