JQuery progress bar - add text and change background color

Question

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

• In the progress bar I want to show the text Progress 70%
• And I want to change the default gray bar of the progress bar

This is what I have done so far, which allows me to add text to 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 can’t figure out how to change the color. It should not change dynamically - only one color that is not gray :)

thanks

Answer 1

Assuming you're using jQueryUI, the background progress indicator driven by the CSS attribute is a solid image.

The style attribute is .ui-widget-header , so you need to change the background image for this. In the title of your document (or if you don’t have access to the head, then the body will do it) add the following if you want a fantastic 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 one-color background:

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

!important requires the new style to overwrite existing CSS.

Also, your HTML progress bar is missing an end tag.

Answer 2

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

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

There is a lot of complexity here: http://jsfiddle.net/ZQrnC/ = Dynamically changing jQuery Progress Bar color

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

jquery code

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

CSS

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