Est-il possible de rendre la barre de progression indéterminée avec Twitter Bootstrap?

Est-il possible de rendre la barre de progression indéterminée avec Twitter Bootstrap (v2 ou v3) en utilisant une fonctionnalité intégrée ou un plugin tiers? Je trued à google pour cela, mais sans chance.

Exemple de je veux réaliser:

la barre de progression

22
demandé sur John Slegers 2013-11-04 14:21:30

5 réponses

Dans bootstrap 2:

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

Dans bootstrap 3:

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

Dans bootstrap 4:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
31
répondu Cody 2018-05-23 17:13:28

Voici ce que je ferais pour obtenir une barre de progression indéterminée:

  • utilisez une barre de progression rayée et animée
  • Réglez-le à 100%
  • personnaliser la vitesse d'animation
  • Ajouter un texte comme "veuillez patienter" pour informer l'utilisateur que quelque chose est en cours de traitement
  • Ajouter des ellipses (...), en utilisant la propriété css content
  • animer les ellipses en utilisant CSS dans les navigateurs qui prennent en charge ce

Démo :

.progress {
    margin: 15px;
}

.progress .progress-bar.active {
    font-weight: 700;
    animation: progress-bar-stripes .5s linear infinite;
}

.dotdotdot:after {
    font-weight: 300;
    content: '...';
    display: inline-block;
    width: 20px;
    text-align: left;
    animation: dotdotdot 1.5s linear infinite;
}

@keyframes dotdotdot {
  0%   { content: '...'; }
  25% { content: ''; }
  50% { content: '.'; }
  75% { content: '..'; }
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    <span>Please wait<span class="dotdotdot"></span></span>
  </div>
</div>

(voir aussi ce Violon)

11
répondu John Slegers 2016-04-16 18:36:42

Ancien sujet.. mais j'ai dû le faire aujourd'hui. Voici ce que j'ai fait.

Tout d'abord, j'ai utilisé la classe Bootstrap dialog comme trouvé ici.

Fragment HTML

<div id="progressDiv" class="progress">
    <div class="progress-bar progress-bar-striped active" 
        role="progressbar" 
        aria-valuenow="100" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="width: 100%">
    </div>
</div>

JavaScript

var progress = $("#progressDiv").html();

BootstrapDialog.show(
{
    title: "Please wait...",
    message: progress
});

La boîte de dialogue résultante est: (notez que la barre de progression est animée)

entrez la description de l'image ici

Cela fait apparaître une boîte de dialogue modale montrant une barre animée.

4
répondu James 2016-04-15 21:57:50

Si vous voulez une solution CSS uniquement, voici:

HTML:

<div class="progress" style="position: relative;">
    <div class="progress-bar progress-bar-striped indeterminate">
</div>

CSS:

.progress-bar.indeterminate {
  position: relative;
  animation: progress-indeterminate 3s linear infinite;
}

@keyframes progress-indeterminate {
   from { left: -25%; width: 25%; }
   to { left: 100%; width: 25%;}
}

Voici une version de travail:

Https://jsbin.com/dewikogujo/edit?html,css,sortie

4
répondu Dave 2016-07-06 16:38:17

Ce n'est pas joli, mais ça fait le travail:

HTML:

<div class="progress" style="position: relative;">
    <div class="progress-bar progress-bar-striped active" style="position: relative; left: -180px; width: 180px">
</div>

Javascript:

setInterval(function() {
    var progress_width = $('.progress').width();
    var $progress_bar = $('.progress-bar');

    $progress_bar.css('left', '+=3');

    var progress_bar_left = parseFloat($progress_bar.css('left')+'');
    if (progress_bar_left >= progress_width)
        $progress_bar.css('left', '-200px');
}, 20);

N'hésitez pas à optimiser un peu vos sélecteurs jQuery; -)

Voici une version de travail:

Https://jsbin.com/copejaludu/edit?html,js,sortie

0
répondu Dave 2016-07-02 06:27:52