There are two aspects of the jQuery UI progressbar widget we can style. First, there's the container. This is essentially the progressbar border. While you can style the background of the container, it's best to just leave it alone. The second aspect is the value
div. This goes inside the container and increases or decreases in width as the value of the progressbar changes. This is the part the user is interested in, and we can apply interesting styles to it, such as a linear gradient.
By default, the value
div — or
ui-progressbar-value if you want to refer to it by class — inherits it's style properties from the
ui-widget-header class. That is, the
background property applies the background image and color. The image is used to overlay the background color, in case the theme has any gradients applied through the theme itself. This offers good cross-browser support out of the box, but, if you're itching to use a modern technique, here's how it's done.
This is the default look of the progressbar value
div using a particular theme. It has a background color applied to it, in addition to the background image — which applies a subtle gradient-like effect. Here's an example of how to override the default CSS, and the resulting look-and-feel.
There's really not much to this style enhancement. The CSS selector we're using applies to the progressbar value
.ui-progressbar .ui-progressbar-value. Then we set a basic
linear-gradient value on the
background property. This gives us a greater degree of control over how the progressbar looks. Particularly if you don't want to change the
ui-widget-header styles of the theme, which change the look-and-feel of everything else in the UI, not just the progressbars.