Comment animer une barre de progression dans le Bootstrap 4?

Nous avons l'habitude d'avoir le pourcentage de progression défini comme un attribut CSS de Bootstrap 3. La nouvelle Bootstrap 4 version a <progress> et un value attribut.

Avec la version 3, il est possible d'utiliser jQuery css animation pour animer la barre de progression à un pourcentage donné. HTML les attributs de l'élément ne peut pas être "animé". La Question est: comment pouvons-nous animer le pourcentage d'un bootstrap 4 barre de progression? Je suppose que c'est possible, sinon, ce serait un grand backstep de bootstrap 3.

Liés à la question: Comment animer une barre de progression dans le Bootstrap 3? mais c'est pour bootstrap 3. En jQuery, les attributs peuvent être définis par attr (), mais il n'est pas possible d'animer par une valeur d'attribut (autant que je sache).

C'était un dump de la question. Constaté que, au lieu de la valeur, je peux encore utiliser les css largeur. $("#progressbar").animate({ "width": data["percent"]+"%" }, { duration: 500, easing: 'linear' });

InformationsquelleAutor nagylzs | 2015-11-22

3

Bootstrap 4 barres de progression utiliser le HTML5 <progress></progress> élément. Par défaut, les progrès de l'élément n'a pas d'animer et il n'y a actuellement n'est pas un bon navigateur croix façon de les animer à l'aide de CSS animations. Chris Coyer site CSS Astuces en parle.

Au moment de la rédaction seulement WebKit/Blink navigateurs prennent en charge les animations sur les progrès de l'élément. Nous allons animer les bandes sur -webkit-progrès-de la valeur en changeant l'arrière-plan position.

Cela nous oblige à utiliser du JavaScript, ou manuellement style de notre barre de progression à l'aide de <div> éléments. Cela va probablement changer depuis Bootstrap 4 est actuellement en phase alpha. La question pertinente est twbs/bootstrap#17148

jQuery

Cela peut être fait grâce à jQuery la façon dont vous avez dit ci-dessus.
```
var percentage = 20;
$("#progressbar")
  .animate({
    "value": percent + "%"
  }, {
    duration: 600,
    easing: 'linear'
  });
```
Barre De Progression Personnalisée

Changer les noms de classe pour prévenir les collisions et vous aurez l'identique de la barre de progression qui est animé par les animations CSS.

HTML
```
<div class="progress">
  <div class="progress-bar" style="width: 60%;">
  </div>
</div>
```
CSS
```
.progress-bar {
    height: 100%;
    width: 0;
    color: #fff;
    background-color: #337ab7;
    transition: width .6s ease;
}

.progress {
    height: 1em;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
```
Violon

InformationsquelleAutor 0xcaff

En JavaScript, vous pouvez créer vos propres animations en créant un fonction récursive.

À l'intérieur de cette fonction, vous disposez d'un setTimeout que s'arrête l'exécution de la fonction d'un nombre de millisecondes jusqu'à ce que l'image suivante est exécutée. À l'intérieur de la setTimeout, la fonction s'appelle elle-même, et ce processus ne cesse de répéter tant qu'une certaine condition est valide. L'animation des boutiques lorsque la condition devient invalide et la fonction s'arrête appelant lui-même.

Vous pouvez utiliser cette technique pour ajouter de l'animation de Bootstrap 4 barre de progression, comme le montre la démonstration de soufflage. Avec chaque image de l'animation, vous pouvez modifier la valeur de vos progrès élément et/ou votre délai d'attente. Le plus vous gardez vos intervalles, plus l'effet sera.

Une démo

JS:

var $alert = $('.alert');
var $progressBar = $('.progress');

var progress = 0;      //initial value of your progress bar
var timeout = 10;      //number of milliseconds between each frame
var increment = .5;    //increment for each frame
var maxprogress = 110; //when to leave stop running the animation

function animate() {
    setTimeout(function () {
        progress += increment;
        if(progress < maxprogress) {
            $progressBar.attr('value', progress);
            animate();
        } else {
            $progressBar.css('display', 'none');
            $alert.css('display', 'block');
        }
    }, timeout);
};
animate();

CSS:

.pad {
    padding: 15px;
}

.alert {
    display: none;
}

HTML:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div class="pad">
    <progress class="progress" value="0" max="100">0%</progress>
    <div class="alert alert-success" role="alert">Loading completed!</div>
</div>

(voir aussi ce Violon)

Merci! Votre commentaire est très apprécié 🙂
Très agréable. Ce doit avoir été accepté de répondre.

InformationsquelleAutor John Slegers

Bootstrap 4 a maintenant la progress-bar-animated classe. Vous pouvez basculer par programme cette classe pour créer une animation de la barre de progression de l'effet. Par exemple, à l'aide de jQuery:

$('#btn').click(function() {

  var timerId, percent;

  //reset progress bar
  percent = 0;
  $('#btn').attr('disabled', true);
  $('#progress').css('width', '0px').addClass('progress-bar-animated active');
  $('#progress').html('<span class="spinner-border spinner-border-sm ml-auto"></span>');

  timerId = setInterval(function() {

    //increment progress bar
    percent += 5;
    $('#progress').css('width', percent + '%');

    if (percent >= 100) {
      clearInterval(timerId);
      $('#btn').attr('disabled', false);
      $('#progress').removeClass('progress-bar-animated progress-bar-striped active').html('Complete');
    }
  }, 300);
});

Démo

InformationsquelleAutor Zim

Vous devez vous connecter pour publier un commentaire.

jQuery

Barre De Progression Personnalisée

HTML

CSS

Une démo