Twitter bootstrap barre de progression de l'animation de chargement de page

Question

J'ai une page avec plusieurs bootstrap barres de progression. De définir leurs valeurs initialement fonctionne très bien. Bien que je voudrais que les barres de progression pour animer/transition de leurs membres lorsqu'un utilisateur ouvre la page.

Ce JS fonctionne très bien, lorsque vous cliquez sur l'un des bars. J'aurais besoin de quelque chose comme ça sur un "onload" l'événement de la barre. Mais le "onload" de l'événement n'est pas disponible pour la s

//animate progress bars
$('.progress .bar').on("click", function(event) {
  var me = $(this);
  perc = me.attr("data-percentage");
  me.css('width', perc+'%');
});

Comment puis-je obtenir ce comportement au chargement de la page pour toutes les barres de progression sur une page?

Answer 1

Hiya cela peut aider démo: JSFiddle mise à Jour mise à Jour JSFiddle

S'il vous plaît laissez-moi savoir si cela ne vous aide pas, je vais supprimer le post. :)

Aussi, si vous pouvez fournir jsfiddle je pourrais prendre un coup d'oeil. Cheerios

MODIFIER

• Nom de la classe a changé à partir de bar de progress-bar en v3.1.1

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 30px;
    width: 400px;
}​

JQuery Code utilisé dans le violon, ci-dessous: et sur le document.prêt

$(document).ready(function(){

    var progress = setInterval(function() {
    var $bar = $('.bar');

    if ($bar.width()>=400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width()+40);
    }
    $bar.text($bar.width()/4 + "%");
}, 800);

});​

HTML

<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>​

Answer 2

Alors que Tats_innit réponse a une belle touche à elle, j'ai dû le faire un peu différemment depuis que j'ai plus d'une barre de progression sur la page.

voici ma solution:

JSfiddle: http://jsfiddle.net/vacNJ/

HTML (exemple):

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="60"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="50"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="40"></div>
</div>

​

JavaScript:

setTimeout(function(){

    $('.progress .bar').each(function() {
        var me = $(this);
        var perc = me.attr("data-percentage");

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc)+'%');

        }, 50);

    });

},300);

@Tats_innit: à l'Aide de la méthode setInterval() de façon dynamique le recalcul le progrès est une solution sympa, merci camarade! ;)

EDIT:

Un de mes amis a écrit un joli plugin jquery pour personnaliser twitter bootstrap barres de progression. Voici une démo: http://minddust.github.com/bootstrap-progressbar/

Voici le dépôt Github: https://github.com/minddust/bootstrap-progressbar

Answer 3

Bootstrap utilise des transitions CSS3 donc les barres de progression sont automatiquement une animation lorsque vous définissez la largeur de .barre d'auge javascript / jQuery.

http://jsfiddle.net/3j5Je/ ..voir?

Answer 4

Dans la contribution à la ellabeauty de réponse. vous pouvez également utiliser cette dynamique, les valeurs en pourcentage

$('.bar').css('width',  function(){ return ($(this).attr('data-percentage')+'%')});

Et probablement ajouter une accélération personnalisée à votre css

.bar {
 -webkit-transition: width 2.50s ease !important;
 -moz-transition: width 2.50s ease !important;
   -o-transition: width 2.50s ease !important;
      transition: width 2.50s ease !important;
 }