JQuery progress bar - adding Text and changing background color

Question

I am thinking of using the Jquery progress bar to show the progress the user has made in a course.

Within the progress bar, I want to show the text Course Progress 70%
And I want to change the default grey color of the progress bar

This is what I have done so far - which lets me add the text in the center of the progress bar:

$(function() {
    $( "#progressbar" ).progressbar({
        value: 70
    });
);


<div style="width:600px;" id="progressbar">
    <div style="float:left;color:black;text-align:center;width:100%;padding-top:3px;">Course Progress
</div>

But I cant figure out how to change the color. It doesn't have to change dynamically - just one color that is not grey :)

Thanks

score 7 · Accepted Answer · answered May 26 '12 at 12:24

Presuming you're using jQueryUI, the progress bar's background controlled by a CSS attribute - it's a solid image.

The style attribute is .ui-widget-header, so you'd want to change the background image for that. In the head of your document, (or if you don't have access to the head, then the body will do) put the following if you want a fancy background image:

<style type='text/css'>
    .ui-widget-header {
        background-image: url('link-to-a-new-gradient-bar-here.png') !important;
    }
</style>

or alternatively, for a simple single-colour background:

<style type='text/css'>
    .ui-widget-header {
        background-image: none !important;
        background-color: #FF0000 !important; //Any colour can go here
    }
</style>

The !important is necessary to make sure the new style overwrites the existing CSS.

Also, you're missing an end tag on your progress bar HTML.

score 3 · Answer 2 · edited May 23 '17 at 11:59

Hiya working demo simple for your need :) http://jsfiddle.net/Y9c3R/1/

good read here: http://docs.jquery.com/UI/Progressbar

Much elaborate one's reside here: http://jsfiddle.net/ZQrnC/ = Dynamically change the color of jQuery Progress Bar

and if you want to read further: jQuery UI: How to change the color of a ProgressBar?

jquery code

var $progressbar = $("#progressbar").progressbar({ value: 70 }).addClass("beginning");

css

.ui-progressbar.beginning .ui-progressbar-value { background: red; }

JQuery progress bar - adding Text and changing background color

2 Answers2