Webinventif

Voici le script jquery du jour !

Progress Bar Plugin va vous permettre d'afficher et de faire progresser une barre de chargement !

Mise en place:

• Comme d'habitude, on commence par inclure le framework jquery
  <script type='text/javascript' src='jquery.js'></script>
• Ensuite on intègre le plugin Progress Bar
  <script type='text/javascript' src='jqueryprogressbar.js'></script>
• On inclus le css lié
  /* progress bar container */
  #progressbar{
      border:1px solid black;
      width:200px;
      height:20px;
      position:relative;
      color:black;
  }
  /* color bar */
  #progressbar div.progress{
      position:absolute;
      width:0;
      height:100%;
      overflow:hidden;
      background-color:#369;
  }
  /* text on bar */
  #progressbar div.progress .text{
      position:absolute;
      text-align:center;
      color:white;
  }
  /* text off bar */
  #progressbar div.text{
      position:absolute;
      width:100%;
      height:100%;
      text-align:center;
  }
• on appel notre barre, ici elle s'affichera remplie à 50%. A vous d'adaptez selon vos besoins !
  $("#progressbar").reportprogress(50);
• Et évidement incluez une div vide avec la bonne id
  <div id="progressbar"></div>

Voir la démo