[Résolu] Animer barres de progression

Bonjour,

Je suis en train de travailler sur un site en bootstrap dans le cadre d'un cours. Sur celui-ci j'ai ajouté des barres de progression :

<div class="col-md-6">
                        <p class="competences-titres">Compétences</p>
                        <p class="competences-logiciel">Photoshop</p>
                        <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
                            <span class="sr-only">65% Complete</span>
                          </div>
                        </div>
                        
                        <p class="competences-logiciel">Indesign</p>
                        <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">90% Complete</span>
                          </div>
                        </div>
                        
                         <p class="competences-logiciel">Illustrator</p>
                        <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">90% Complete</span>
                          </div>
                        </div>
                        
                         <p class="competences-logiciel">HTML/CSS</p>
                        <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                            <span class="sr-only">40% Complete</span>
                          </div>
                        </div>
                
                    </div>

J'aimerais animer ces dernières avec du javascript de manière a ce que l'on perçoive bien la progression. J'ai trouvé ça :

$(function (){
    function timer(n) {
        $(".progress-bar").css("width", n + "%");
        if(n = 100) {
                setTimeout(function() {
                    timer(n + 10);
            }, 200);
        }
    }
 
    timer(0); 
}); 

Les barres s'animent mais pas correctement. Etant débutante en javascript je n'arrive pas à changer les paramètres car je ne comprend pas tout. Si quelqu'un pouvait m'expliquer tout cela ce serait avec plaisir !

Merci d'avance
Modifié par Celiadel (13 Apr 2017 - 22:41)

C'est bien ce que fait ton code :

<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">

Donc ta barre commence à 65% puis ton js se lance et donc la barre repart de zéro.
Modifié par bzh (14 Apr 2017 - 23:26)

Autant* pour moi, ça marche mieux avec if(n < 100). Mais de toutes façons, le script est mal pensé puisque vous changez la largeur de toutes les barres avec une valeur unique qui démarre à 0 et pas à la valeur initiale déterminée par l'attribut aria-valuenow.
Voici votre script modifié en ajoutant en paramètre à timer la barre concernée :

$(function (){
  function timer(p,n) {
    n=Math.min(n,100);
    p.css("width", n + "%").text(n+"% Complete");
    if(n < 100) {
      setTimeout(function() {
        timer(p, n + 10);
      }, 200);
    }
  }
  $(".progress-bar").each(function(i,pb){
    timer($(pb),$(pb).attr("aria-valuenow")); 
  });
}); 

Merci beaucoup pour votre aide

Je pense que je fais mal quelque chose... Les barres partent ici de leur pourcentage de base pour remplir la barre entièrement. Or, je souhaiterais que la barre parte de 0 et arrive à 65% par exemple

Je suis désolée je suis vraiment débutante en java

Ok, je vous explique :

$(".progress-bar").each(function(i,pb){
    timer($(pb),0); 
  });

recherche tous les éléments ayant une classe "progress-bar", et pour chacun de ces éléments, on appelle la fonction timer en passant la progress-bar (sous la forme d'un objet jquery) et la valeur initiale, à savoir 0.
La fonction timer commence par ajuster la valeur reçue pour ne pas dépasser la valeur max. Pour cela, on prend la valeur minimale entre la valeur transmise et l'attribut "aria-valuenow".
On modifie la largeur (et le texte, je l'ai ajouté pour debuggage) et si on n'est pas à la valeur max, on rappelle timer 0.2s plus tard en incrémentant de 10 la progression (avis perso : c'est beaucoup plus fluide avec un incrément de 1 toutes les 10ms).

Pour renouveler le phénomène, il faut rappeler le code qui lance l'animation.

  function animate(){
    $(".progress-bar").each(function(i,pb){
      timer($(pb),0); 
    });
    setTimeout(animate,10000);
  }
  animate();