Animierte Bootstrap 3-Progressbar-Anzeige

29.09.2013

Die grundsätzliche Verwendung ist auf http://getbootstrap.com/components/#progress beschrieben. Welche der Varianten verwendet wird, ist dabei irrelevant - lediglich die "Stacked"-Version ist dafür ungeeignet.

Entscheidend ist das aria-valuenow-Attribut, der den Wert extrahiert. Die width-Angabe im style-Attribut hingegen gilt es zu entfernen bzw. auf 0% zu setzen, da der animierte Aufbau nicht funktioniert, wenn der Balken bereits vollständig dargestellt wird.

Für den animierten Aufbau dient der folgende JavaScript-Code, der an eine beliebige Stelle hinzugefügt wird. jQuery wird in diesem Fall dafür vorausgesetzt.

<script type="text/javascript">
   $(document).ready(function() {
      $('.progress .progress-bar').css("width",
                function() {
                    return $(this).attr("aria-valuenow") + "%";
                }
        )
    });
</script>

Für den Stylesheet ist eigentlich nichts weiter zu ändern, da die CSS 3-Transition für die Breitenänderung bereits bei Bootstrap 3 mit voreingestellt ist. Die Standarddauer dafür liegt bei 0.6 Sekunden.

Sollte das zu viel oder zu wenig sein, kann der Wert in einem eigenen Stylesheet ganz einfach überschrieben werden:

.progress-bar {
   transition-duration: 3s;
}

Beispiel:

90 / 100