progreso - progress bar jquery bootstrap

¿Cómo se anima el valor de una barra de progreso jQuery UI?

Question

Configuré una barra de progreso jQuery UI pero no puedo usar jQuery animate para animar su valor. ¿Alguna idea de cómo hacer que esto funcione?

La variable percentDone contiene un número del 0 al 100 que muestra qué tan lejos debe estar la barra de desplazamiento (esto funciona bien).

He intentado varias cosas diferentes en vano. Esto es lo que tengo hasta ahora:

var progressbar = $("#progressbar1").widget();
progressbar.animate({
value: percentDone
}, 5000, function() {
console.debug(''done animating'');
});

Tenga en cuenta que si actualizo la barra de desplazamiento usando el método de "valor" funciona bien, pero salta a ese valor en lugar de animarlo suavemente:

$("#progressbar1").progressbar(''value'', percentDone);

Answer 1

Animación con CSS3

Con CSS3 no es necesario utilizar JavaScript para administrar el valor de la barra de progreso directamente. Solo agrega esto a tu estilo:

.ui-progressbar-value {
transition: width 0.5s;
-webkit-transition: width 0.5s;
}

Puede obtener más información sobre las Transiciones CSS3 .

Answer 2

Aquí hay una solución elegante: Growing Jquery Progress Bars

$(function() {
$("#progressbar").progressbar({
value: 1
});
$("#progressbar > .ui-progressbar-value").animate({
width: "37%"
}, 500);
});

Answer 3

Aquí se explica cómo hacerlo para animar sin problemas, en lugar de la manera algo desigual sugerida en la respuesta aceptada actualmente de @aSeptik. .progressbar(''value, ...) alto el .progressbar(''value, ...) .

// On load, make the progressbar inside always have round edges:
// (This makes it look right when 100%, and seems nicer all the time to me.)
$("#progressbar .ui-progressbar-value").addClass("ui-corner-right");
new_width = "50px"; // you will need to calculate the necessary width yourself.
$("#progressbar .ui-progressbar-value").animate({width: new_width}, ''slow'')

Answer 4

El siguiente script no solo anima la barra de progreso, sino que también aumenta / disminuye el% de los valores mostrados paso a paso

 // ''width'' can be any number
$(''#progressbar .ui-progressbar-value'').animate(
{
width: width + ''%''
},
{
duration: 3000,
step: function (now, fx) {
$(''.leftvalue'').html(parseInt(now) + ''%'');
$(''.rightvalue'').html((100 - parseInt(now)) + ''%'');
}
});

Answer 5

Escribí este plugin / método para animar muy fácilmente cualquier barra de progreso, y funciona muy bien para mí, así que espero que también lo haga para todos los demás.

(function( $ ) {
$.fn.animate_progressbar = function(value,duration,easing,complete) {
if (value == null)value = 0;
if (duration == null)duration = 1000;
if (easing == null)easing = ''swing'';
if (complete == null)complete = function(){};
var progress = this.find(''.ui-progressbar-value'');
progress.stop(true).animate({
width: value + ''%''
},duration,easing,function(){
if(value>=99.5){
progress.addClass(''ui-corner-right'');
} else {
progress.removeClass(''ui-corner-right'');
}
complete();
});
}
})( jQuery );

Simplemente agrega ese código a la parte superior de tu página en cualquier lugar y úsalo en un elemento como tal

$(''#progressbar'').animate_progressbar(value [, duration] [, easing] [, complete] );

EDITAR:

Aquí hay una versión reducida del código, lo hace cargar un poco más rápido.

(function(a){a.fn.animate_progressbar=function(d,e,f,b){if(d==null){d=0}if(e==null){e=1000}if(f==null){f="swing"}if(b==null){b=function(){}}var c=this.find(".ui-progressbar-value");c.stop(true).animate({width:d+"%"},e,f,function(){if(d>=99.5){c.addClass("ui-corner-right")}else{c.removeClass("ui-corner-right")}b()})}})(jQuery);

Answer 6

puedes hacerlo con un simple progreso html5 nativo.
html:

<progress id="score-progress-bar" value="10" max="100"></progress>

js:

$(''#score-progress-bar'').animate({value: your_value_from_0_to_100}, {duration: time_in_ms, complete: function(){console.log(''done!'');}});

Answer 7

una muy buena solución en el foro de jquery

http://forum.jquery.com/topic/smooth-progressbar-animation

la barra de progreso debe inicializarse con digamos 0.1 para trabajar

$("#progressbar .ui-progressbar-value").animate(
{
width: "67%"
}, {queue: false});

Answer 8

• DEMO 1: el primero, prueba de concepto

$(function() {
var pGress = setInterval(function() {
var pVal = $(''#progressbar'').progressbar(''option'', ''value'');
var pCnt = !isNaN(pVal) ? (pVal + 1) : 1;
if (pCnt > 100) {
clearInterval(pGress);
} else {
$(''#progressbar'').progressbar({value: pCnt});
}
},10);
});

• DEMO 2:: adaptación de la respuesta de @ Peter a continuación por el bien ;-).

$(function() {
$(''#progressbar'').progressbar(); // inizializa progressbar widget
$pVal = $(''.ui-progressbar-value'').addClass(''ui-corner-right'');
var pGress = setInterval(function() { //generate our endless loop
var pCnt = $pVal.width(); // get width as int
// generate a random number between our max 100 and it''s half 50,
// this is optional, and make the bar move back and forth before
// we reach the end.
var rDom = Math.floor(Math.random() * (100 - 50 + 1) + 50);
var step = rDom >= 100 ? 100: rDom; // reached our max ? reset step.
doAnim(step);
},1000);
var doAnim = function(wD) {
// complete easing list http://jqueryui.com/demos/effect/easing.html
$pVal.stop(true).animate({width: wD + ''%''},1000, ''easeOutBounce'');
if (wD >= 100) clearInterval(pGress) /* run callbacks here */
}
});

En una aplicación real, puede que no necesite generar un bucle, por ejemplo, mientras carga un archivo, su aplicación de flash le dirá el tamaño del archivo y le informará cuándo ha alcanzado el valor máximo necesario, por lo que mi primer código pretende demostrar solo el uso del setter y getter de la barra de progreso y, por supuesto, lo que hace que todo funcione, eso es, por ejemplo, el loop; el segundo es una adaptación del mismo concepto con azúcar.