Changing color of progress bar on callback

Question

I have a progress bar:

<progress id="communicationProgress" value="0" max="100"></progress>

I use jquery to animate it:

var progress = function (name, duration, value, easing, callback) {
    $(name).val(0).animate(
        { value: value },
        { duration: duration,
            easing: easing,
            complete: function () {
                if (callback) {

                }
            }
        }
    );
};

This is the css for color values that are used during the animation:

#skills span {
    top: -30px;
    left: 2%;
    position: relative;
    font-size: 1.4em;
    font-weight: bolder;
    font-family: monospace;
    color: #fff;
}

progress {
    background-color: #f3f3f3;
    border: 0;
    height: 2.5em;
    width: 100%;
}

progress::-webkit-progress-bar {
    background-color: #e0eaf0;
}

progress::-webkit-progress-value {
    background-color: #329ad1;
}

progress::-moz-progress-bar {
    background-color: #329ad1;
}

I want to change the color of the status bar on callback. I have tried looking through the jquery docs but can't figure out how to change the color.

take a look at http://stackoverflow.com/questions/1476573/jquery-ui-how-to-change-the-color-of-a-progressbar and implement it on your callback — Supamiu, Aug 11 '15 at 11:42
http://stackoverflow.com/questions/1476573/jquery-ui-how-to-change-the-color-of-a-progressbar — Martijn de Langh, Aug 11 '15 at 11:43
@MartijndeLangh that's a jQuery ui progressbar, OP is asking about a [HTML5 progress bar](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) — Timo, Aug 11 '15 at 11:49
@MartijndeLangh Would that work for HTML5 progress bar as Timo points out? — Arash Saidi, Aug 11 '15 at 12:02
@ArashSaidi sorry I was reading Jquery and progressbar so I overlooked the HTML5 tag, please take a look at my answer below for html5 — Martijn de Langh, Aug 11 '15 at 12:22

score 2 · Accepted Answer · answered Aug 11 '15 at 12:19

2

For an HTML5 progress you can take a look at

https://css-tricks.com/html5-progress-element/

It shows how to alter the styling of a progress element. If you have created the right styling on a class of progressbar (e.g. progressbar.red) you can add a class for each color to css and then remove / add a color class with jquery's addClass method

answered Aug 11 '15 at 12:19

Martijn de Langh

405
3
16

Ah, yes, this makes sense. I didn't think about adding a class. Thanks! – Arash Saidi Aug 11 '15 at 12:38

Changing color of progress bar on callback

1 Answers1