javascript - Animando el ancho de la barra de progreso de Bootstrap con jQuery

tooltip button

Question

Quiero animar el ancho de una barra de progreso de 0% a 70% durante 2,5 segundos. Sin embargo, el código siguiente cambia inmediatamente el ancho al 70% después de un retraso de 2.5 segundos. ¿Qué me estoy perdiendo?

$(".progress-bar").animate({
width: "70%"
}, 2500);

JSFiddle: http://jsfiddle.net/WEYKL/

Answer 1

El problema está en el efecto de transición predeterminado de Bootstrap, que anima cualquier actualización de la propiedad de width .

Si lo desactivas al suprimir el estilo correspondiente, funcionará bien, por ejemplo:

.progress-bar {
-webkit-transition: none !important;
transition: none !important;
}

DEMO: http://jsfiddle.net/WEYKL/1/

Answer 2

Por lo tanto, tiene más sentido ajustar el efecto de transición a través de CSS o jQuery.

.progress-bar {
-webkit-transition: width 2.5s ease;
transition: width 2.5s ease;
}

Y solo cambia el valor del ancho.

$(".progress-bar").css(''width'', ''70%'');

Answer 3

Puedes arreglarlo agregando:

.progress .progress-bar {
transition: unset;
}

var delay = 500;
$(".progress-bar").each(function(i) {
$(this).delay(delay * i).animate({
width: $(this).attr(''aria-valuenow'') + ''%''
}, delay);
$(this).prop(''Counter'', 0).animate({
Counter: $(this).text()
}, {
duration: delay,
// easing: ''swing'',
step: function(now) {
$(this).text(Math.ceil(now) + ''%'');
}
});
});

.progress {
margin-bottom: 20px;
}
.progress-bar {
width: 0;
}
.bg-purple {
background-color: #825CD6 !important;
}
.progress .progress-bar {
transition: unset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h2>Bootstrap 4 Progress Bars</h2>
<div class="progress border">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70</div>
</div>
<div class="progress border">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
</div>
<div class="progress border">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-purple" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90</div>
</div>
</div>

Answer 4

Es muy fácil si usa la barra de progreso bootstrap,

solo agrega el atributo aria-valuenow = "percent_required%" para dividir con la clase "barra de progreso" de esta manera:

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="57%" aria-valuemin="0" aria-valuemax="57">

A continuación, en script:

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

Recargar, ir!