Linear Gradients With Progressbars

Using the CSS linear gradient property with the jQuery UI progressbar widget.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/flick/jquery-ui.css">
<div id="progressbar"></div>

CSS

body {
    font-size: 0.8em;
    margin: 2em;
}

#progressbar {
    width: 40%;
}

.ui-progressbar .ui-progressbar-value {
    background: -webkit-linear-gradient(top, #aaaaaa, #dddddd);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background: -ms-linear-gradient(top, #aaaaaa, #dddddd);
    background: -o-linear-gradient(top, #aaaaaa, #dddddd);
    background: linear-gradient(top, #aaaaaa, #dddddd);
}

JavaScript

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