Linear Gradients With Progressbars

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 div — .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.