Relleno de Barra de progreso - Implementación de jQuery

Question

Estoy implementando mi propia barra de progreso usando jQuery. Mi pregunta es ¿cómo puedo llenar (por ejemplo) solo el 30% con un fondo? ¿Cuáles son mis opciones? Básicamente, la barra de progreso es simple div con esquinas redondeadas (-moz-border-radius). Estoy usando Firefox 3.6.3.

[Actualización] Probé this ejemplo. ¿Cómo forzar que el lado derecho del área rellena no se redondee como en el tercer ejemplo? El cuarto ejemplo es problemático ... ¿Cómo resolverías esto?

Gracias!

Answer 1

no saben lo que está utilizando para animar la barra de progreso, pero si se puede modificar el área medida que se acerca al final se puede obtener una transición sin problemas.

$('#inner4') 
    .css('width',25) 
    .css('-moz-border-radius-topright','0') 
    .css('-moz-border-radius-bottomright','0') 
    .animate(
     { 
     width:425 
     }, 
     3000, 'linear', 
     function() { 
      $('#inner4').animate({ 
      width:450, 
      '-moz-border-radius-bottomright':'+=25', 
      '-moz-border-radius-topright':'+=25' 
      }, 
      200,'linear', 
      function() {} 
     );//end inner animate 
     } 
    );//end animate 

Here's an example

Answer 2

Una opción simple es utilizar un color de fondo, asegúrese de que el ancho del contenedor externo sea fijo y luego simplemente establecer el ancho del div interno en un porcentaje que sea el mismo que el progreso.

Answer 3

Puede utilizar 2 divs, uno dentro del otro, poner el fondo en la interior y establecer su anchura con un%, algo como esto:

<div style=""> 
    <div style="background: red; width: 50%">&nbsp;</div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 4

Se podría utilizar uno div y una imagen, como mencioné anteriormente en un comentario. Aquí hay una manera en que podrías hacerlo. (No completamente probado, por lo que podría romperse.)

HTML:

<div id="progressBar"></div> 

CSS:

#progressBar { 
    width: 200px; 
    height: 20px; 
    background: url('http://o.imm.io/x9E.jpg') no-repeat; 
    background-position: -200px 0px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 

JS:

function setProgress(target,value) { 

    var oldPosition = $(target).css("backgroundPosition"); 

    // Log the old position 
    console.log("Old position: " + oldPosition); 
    var newPosition = parseInt(oldPosition) + parseInt(value); 

    // Log the new position 
    console.log("New position: " + newPosition); 
    $(target).animate({backgroundPosition: newPosition + 'px 0px'}) 
} 

Editar: I añade el redondeado esquinas y funciona exactamente como lo especificó, sin problemas con las esquinas redondeadas.

Editar 2: Comprueba la versión JSBin de este código.

Editar 3: Como dijo el OP, necesitaban que la barra de progreso fuera de un tamaño flexible. Esta implementación no hará eso. Voy a recomendar (como lo he hecho antes) el uso del jQueryUI Progress Bar. Es fácil de usar y bastante ligero.

Editar 4: Yo he llegado con otra implementación de este, lo que requiere un poco más de Javascript, pero puedes probarlo aquí: http://jsfiddle.net/ntnz4/7/

Answer 5

que he hecho lo que está haciendo para algunos de mis sitios, esto es lo que hice:

la primera vez que hicimos un poco de margen de beneficio básico:

<div id="progressBar"> 
    <div id="progressBarInner"></div> 
</div> 

Y el CSS:

#progressBar { 
    width: 200px; 
    height: 20px; 
} 

#progressBarInner { 
    background: url('path/to/your/progress/image.jpg'); 
    width: 100%; 
    height: 100%; 
} 

Cuando se hace esto, establecer el progreso es realmente muy simple. Independientemente del progreso que desee que se muestre en la barra de progreso, configure el ancho del elemento #ProgressBarInner.Por ejemplo, si desea mostrar un 32%, lo haces con esto:

width: 32%

para la progressBarInner div.

No sé cómo hacer esto usando jQuery fuera de mi cabeza, pero sé con certeza que puede establecer propiedades de CSS usándolo, así que esto es completamente posible.

Answer 6

HTML:

<div class="progress"><div style="width:30%"></div></div> 

CSS:

.progress { 
    width: 300px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.progress div { 
    background: url(background.png); 
    height: 10px; 
    -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; 
    -webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; 
} 

Answer 7

estoy un poco confundido sobre lo que quiere hacer en relación con las esquinas redondeadas en el color lleno! Pero si se supone que avanza recto, no redondeado, simplemente configure el divisor de envoltura con desbordamiento de css: oculto;

Con eso, el div interior avanzará hasta el 100% y al pasar el área redondeada creará un efecto genial!