Ist es möglich, mit Twitter Bootstrap unbestimmten Fortschritt bar zu machen?

Ist es möglich zu Rendern unbestimmte Fortschrittsleiste mit Twitter Bootstrap (entweder v2 oder v3) entweder mit einigen build-in-Funktionalität oder 3rd-party-plugin?
Ich abgerichtet zu google, aber ohne Glück.

Beispiel, die ich erreichen möchte:

Ist es möglich, mit Twitter Bootstrap unbestimmten Fortschritt bar zu machen?

InformationsquelleAutor der Frage Max Romanovsky | 2013-11-04

  1. 29

    In bootstrap 2:

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

    In 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>

    In 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>

    InformationsquelleAutor der Antwort Cody

  2. 4

    Altes Thema.. aber ich hatte dies heute. Hier ist, was ich Tat.

    Erste, ich benutzte das Bootstrap-Dialogfeld Klasse wie hier.

    HTML-fragment

    <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
});

    Wird das resultierende Dialogfeld ist: (Beachten Sie, dass der Fortschrittsbalken animiert)

    Ist es möglich, mit Twitter Bootstrap unbestimmten Fortschritt bar zu machen?

    Daraufhin erscheint ein Modaler dialog mit einer animierten Leiste.

    InformationsquelleAutor der Antwort James

  3. 3

    Wenn Sie möchten, eine CSS-Lösung, hier ya go:

    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%;}
}

    Hier eine funktionierende version:

    https://jsbin.com/dewikogujo/edit?html,css-Ausgabe

    InformationsquelleAutor der Antwort Dave

  4. 0

    Es ist nicht schön, aber es bekommt den job getan:

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

    Fühlen Sie sich frei, optimieren Sie Ihre jQuery-Selektoren ein bisschen 😉

    Hier eine funktionierende version:

    https://jsbin.com/copejaludu/edit?html,js,output

    InformationsquelleAutor der Antwort Dave

Schreibe einen Kommentar