How to style the value of a HTML5 progress bar with JQuery?

Question

This is how I get the bar:

var bar = $('#progressbar');

I can style and animate it just fine, with either of:

bar.css(...)
bar.animate(...)

But how can I adjust the CSS for JUST the progress bar value element?

Like I can do in my styles.css file:

progress::-webkit-progress-value {
    background:white;
    opacity: 0.7;
}

How about using [JQuery UI progressbar](http://jqueryui.com/progressbar/) ? [Link](http://stackoverflow.com/questions/1476573/jquery-ui-how-to-change-the-color-of-a-progressbar) — Vucko, Jul 02 '13 at 08:29
Possible duplicate of http://stackoverflow.com/questions/17420609/how-to-style-the-value-of-a-html5-progress-bar-with-jquery — cetver, Jul 02 '13 at 08:32
@cetver The question you linked to is this one - you indicated it's a duplicate of itself... :) — Brendan Bullen, Jul 02 '13 at 08:38
@BrendanBullen http://stackoverflow.com/questions/5016011/is-there-any-possibility-to-color-the-html5-progress-tag ooops =) — cetver, Jul 02 '13 at 08:40

score 0 · Answer 1 · answered Jul 02 '13 at 08:20

0

Just try it , Hope it helps

<progress id="progressBar" value="10" max="100" />

$('#click').click(function(){
    $('#progressBar').val(60);
})

For Demo - http://jsfiddle.net/fJxGG/196/

answered Jul 02 '13 at 08:20

Rajeev Bera

2,021
1
16
30

I don't have problems adjusting the value, but adjusting the CSS for the value element later. – kadrian Jul 02 '13 at 08:26
It didn't help ;), I don't know what you're talking about. – kadrian Jul 02 '13 at 11:08
@Microtechie the goal is too change progress bar css, not value – vladkras Jul 02 '13 at 13:50

vladkras · Answer 2 · 2013-07-02T11:36:43.957

if you want to chane css when value changes try:

var bar = $('#progressbar');
bar.change(function() {
    $(this).css('opacity',parseInt($(this).val())/100);
});

EDIT As far as I understood, that you need to style the strip, that presents the value, I have to edit my answer heavily. In fact, I didn't investigate a way to manipulate css pseudo-selectors using jQuery and/or JavaScript, but there's the way to do it creating a stylesheet and changing it dinamically. Here it goes:

    $(document).ready(function() {
        var style=document.createElement("style");
        var sheet = document.head.appendChild(style).sheet;
        var bar = $('#progressbar'); // your progress bar
// first of all, i create first rule
        sheet.insertRule('progress::-webkit-progress-value{ background-color: rgb('+bar.val()+','+bar.val()+','+bar.val()+');}');
        bar.change(function() {
// because here it throws an error if no 1st rule
            sheet.deleteRule(0);
            sheet.insertRule('progress::-webkit-progress-value{ background-color: rgb('+bar.val()+','+bar.val()+','+bar.val()+');}');        
        });

    });

I didn't test the code above (just changed it here), but it gives a basic representation what to do. Here is working example with "plus" button, that increases value and changes backgroung-color of exactly value bar

I'm also dissapointed, that HTML5+JS is so poor in this, maybe later...

EDIT2 actually change() for <progress> doesn't work in jQuery for some reason (it doesn't mean real javascript object doesn't have onchange property), so this example will not really work

check out UPDATED DEMO

again: I DON'T want to change the CSS of the progress bar itself, but of the `progress bar value element` — kadrian, Jul 02 '13 at 08:36
ok, I understood at last, not sure it's possible, but if `` is not mandatory, use `
` or `` styled as you need - it can look as progress bar and it's 100 times easier — vladkras, Jul 02 '13 at 09:06
Yep, that's probably what i'm gonna end up doing. But damn, so much for html5 power ;-) — kadrian, Jul 02 '13 at 09:07

How to style the value of a HTML5 progress bar with JQuery?

2 Answers2