jQuery UI: ¿Cómo cambiar el color de una barra de progreso?

Ya no necesitas investigar más por todo internet porque estás al espacio exacto, tenemos la solución que necesitas sin complicarte.

Solución:

Jugueteé con él y esto es lo que encontré. Usando jQuery UI v1.8rc3, puedo anular los colores del tema para la barra de progreso.

He aquí cómo: cuando agrega un widget de barra de progreso a un div, con algo como:

$("#mydiv").progressbar(value:0);

…la barra de progreso de jQuery UI crea un div dentro de su div; este div interno representa la barra de valor. Para establecer el color de la barra, establezca el fondo del div secundario (interior).

También puede establecer el color del espacio vacío en la barra de progreso, el espacio a la derecha de la barra de valores. Haga esto configurando el fondo del div externo.

Para cualquiera de estos, puede usar colores planos o imágenes. Si usa imágenes, asegúrese de configurar repetir-x. El código para hacer eso, se ve así:

html:

js:

function init()
    // four progress bars
    $("#pbar0").progressbar( "value": 63 );
    $("#pbar1").progressbar( "value": 47 );
    $("#pbar2").progressbar( "value": 33 );
    $("#pbar3").progressbar( "value": 21 );

    // the zero'th progressbar gets the default theme

    // set colors for progressbar #1
    $("#pbar1").css( 'background': 'url(images/white-40x100.png) #ffffff repeat-x 50% 50%;' );
    $("#pbar1 > div").css( 'background': 'url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;' );

    // set colors for progressbar #2
    $("#pbar2").css( 'background': 'url(images/lt-blue-40x100.png) #ffffff repeat-x 50% 50%' );
    $("#pbar2 > div").css( 'background': 'url(images/dustyblue-1x100.png) #cccccc repeat-x 50% 50%' );

    // set colors for progressbar #3
    $("#pbar3").css( 'background': 'LightYellow' );
    $("#pbar3 > div").css( 'background': 'Orange' );

ok, eso se encarga de configurar los colores. Ahora, si desea establecer dinámicamente el color de la barra a medida que cambia el valor, conecte el evento de cambio de barra de progreso, así:

    $("#pbar0").bind('progressbarchange', function(event, ui) 
        var selector = "#" + this.id + " > div";
        var value = this.getAttribute( "aria-valuenow" );
        if (value < 10)
            $(selector).css( 'background': 'Red' );
         else if (value < 30)
            $(selector).css( 'background': 'Orange' );
         else if (value < 50)
            $(selector).css( 'background': 'Yellow' );
         else
            $(selector).css( 'background': 'LightGreen' );
        
    );

Demostración de trabajo: http://jsbin.com/atiwe3/3

---

Nota:

Si desea anular los colores para todas las barras de progreso las clases css a usar son ui-widget-contentpara el "fondo" o div exterior, y ui-widget-header para la barra real (correspondiente al div interno). Me gusta esto:

  .ui-progressbar.ui-widget-content 
     background: url(images/white-40x100.png) #ffffff repeat-x 50% 50%;
  

  .ui-progressbar.ui-widget-header 
     color: Blue;
     background: url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;
  

Si eliminas el .ui-progressbar prefixanulará los colores de todos los widgets de la interfaz de usuario, incluidas las barras de progreso.

Usa el siguiente código:

$( "#nahilaga" ).progressbar(
     value: 20,
     create: function(event, ui) $(this).find('.ui-widget-header').css('background-color':'red')
   );

jQuery Progressbar usa CSS e imágenes.

Tu respuesta de Stackoverflow dice lo mismo:

hay una entrada css llamada .ui-widget-overlay que hace referencia a la imagen ui-bg_diagonals-thick_20_666666_40x40.png, que creo que es la imagen que realmente impulsa la barra de progreso. Tendrá que piratear el css para poder agregar una nueva clase que haga referencia a su nueva imagen en la otra barra de progreso; Todavía no he descubierto cómo hacerlo.

Para cambiar el color tendrías que modificar la imagen png.

O como se escribió anteriormente, puede copiar la imagen, agregar una segunda clase y agregarla usando jquery:

$(progressBar).addClass('secondImage');

valoraciones y reseñas

Recuerda que tienes la opción de agregar una reseña si te ayudó.

---

---

Utiliza Nuestro Buscador