web-dev-qa-db-fra.com

Twitter bootstrap animation de la barre de progression lors du chargement de la page)

J'ai une page avec plusieurs bootstrap barres de progression. Définir leurs valeurs initialement fonctionne bien. Bien que je voudrais les barres de progression pour animer/transition vers leurs états spécifiques lorsqu'un utilisateur ouvre la page.

Ce JS fonctionne bien, lorsque vous cliquez sur l'une des barres. J'aurais besoin de quelque chose comme ça sur un événement "onload" du bar. Mais l'événement "onload" n'est pas disponible pour

//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 page pour toutes les barres de progression sur une page?

javascriptjquerytwitter-bootstrap
42
j7nn7k

Bien que la réponse de Tats_innit ait une jolie touche, je devais le faire un peu différemment car 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>

Un séjour sans faille

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: Utiliser setInterval () pour recalculer dynamiquement la progression est une solution intéressante, thx mate! ;)

EDIT:

Un de mes amis a écrit un plugin Nice jquery pour Twitter personnalisé bootstrap. Voici une démo: http://minddust.github.com/bootstrap-progressbar/

Voici le repo Github: https://github.com/minddust/bootstrap-progressbar

27
j7nn7k

[~ # ~] éditer [~ # ~]

  • Le nom de la classe est passé de bar à progress-bar dans la v3.1.1

[~ # ~] html [~ # ~] 

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

[~ # ~] css [~ # ~] 

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

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

jQuery utilisé dans le violon en dessous et sur le document.ready

$(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);

});​

Démo

JSFiddle

Mise à jour JSFiddle

72
Tats_innit

Bootstrap utilise des transitions CSS3 afin que les barres de progression soient automatiquement animées lorsque vous définissez la largeur de .bar via javascript/jQuery.

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

19
ellabeauty

En contribution à la réponse d'ellabeauty. vous pouvez également utiliser cette valeur de pourcentage dynamique

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

Et probablement ajouter un assouplissement personnalisé à 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;
 }
10
kevin

Voici une solution CSS multi-navigateur. J'espère que ça aide!

DÉMO 

.progress .progress-bar {
    -moz-animation-name: animateBar;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: .4s;

    -webkit-animation-name: animateBar;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: .4s;

    animation-name: animateBar;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .4s;
}

@-moz-keyframes animateBar {
    0% {-moz-transform: translateX(-100%);}
    100% {-moz-transform: translateX(0);}
}
@-webkit-keyframes animateBar {
    0% {-webkit-transform: translateX(-100%);}
    100% {-webkit-transform: translateX(0);}
}
@keyframes animateBar {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  <h3>Progress bar animation on load</h3>
  
  <div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 75%;"></div>
  </div>
</div>
2
Nathalia Xavier