Wie zu animieren eine progress bar in Bootstrap 3?
Ich versuche zu animieren, Bootstrap Fortschrittsbalken, aber ich bin mir nicht sicher, wie das zu tun.
Bekam ich den Wert von der Breite, aber console.log(bar_width);
gibt die Breite in px
aber nicht %
wie gezeigt, inline -style="width:90%
.
Ich neu einen bootply mit dem code: BootStrap-Fortschrittsbalken
HTML:
<!-- Skills Progress Bar -->
<section id="skills-pgr">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100" style="width:90%">
<span>HTML/CSS</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85"
aria-valuemin="0" aria-valuemax="100" style="width:85%">
<span>Photography</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
<span>CMS</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width:75%">
<span>JavaScript/jQuery</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
<span>Photoshop</span>
</div>
</div>
</section>
jQuery:
//Skills Progress Bar
$(function() {
$('.progress-bar').each(function() {
var bar_width = $(this).css('width'); //returns the css width value
var bar_value = $(this).attr('aria-valuenow');
console.log(bar_width);
console.log(bar_value);
$(this).animate({ value: bar_width }, { duration: 2000, easing: 'easeOutCirc' });
});
});
InformationsquelleAutor TheAmazingKnight | 2015-01-24
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnte man mit setInterval timer und erhöhen Sie die Breite auf einem Intervall, bis es erreicht eine maximale Breite..
http://bootply.com/tC8sgQRwDD#
animate
Eigenschaft.InformationsquelleAutor Zim