7 files changed, 95 insertions, 20 deletions
diff --git a/demos/progressbar/animated.html b/demos/progressbar/animated.html
index f03070571..5cb1872ed 100644
--- a/demos/progressbar/animated.html
+++ b/demos/progressbar/animated.html
@@ -9,14 +9,11 @@
 	<script src="../../ui/jquery.ui.widget.js"></script>
 	<script src="../../ui/jquery.ui.progressbar.js"></script>
 	<link rel="stylesheet" href="../demos.css">
-	<style>
-	.ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
-	</style>
 	<script>
 	$(function() {
 		$( "#progressbar" ).progressbar({
 			value: 59
-		});
+		}).find( ".ui-progressbar-value div" ).addClass( "ui-progressbar-overlay" );
 	});
 	</script>
 </head>
@@ -27,10 +24,10 @@
 <div class="demo-description">
 <p>
 This progressbar has an animated fill by setting the
-<code>background-image</code>
+<code>ui-progressbar-overlay</code> class
 on the
 <code>.ui-progressbar-value</code>
-element, using css.
+element's overlay div.
 </p>
 </div>
 </body>
diff --git a/demos/progressbar/indeterminate.html b/demos/progressbar/indeterminate.html
new file mode 100644
index 000000000..34ce6da47
--- /dev/null
+++ b/demos/progressbar/indeterminate.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Indeterminate Value</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.progressbar.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#progressbar" ).progressbar({
+			value: false
+		});
+		$( "button" ).on( "click", function( event ) {
+			var target = $( event.target ),
+				pbar = $( "#progressbar" ),
+				pbarValue = pbar.find( ".ui-progressbar-value" );
+
+			if ( target.is( "#numButton" ) ) {
+				pbar.progressbar( "option", {
+					value: Math.floor( Math.random() * 100 )
+				});
+			} else if ( target.is( "#colorButton" ) ) {
+				pbarValue.css({
+					"background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
+				});
+			} else if ( target.is( "#falseButton" ) ) {
+				pbar.progressbar( "option", "value", false );
+			}
+		});
+	});
+	</script>
+	<style>
+		#progressbar .ui-progressbar-value {
+			background-color: #CCCCCC;
+		}
+	</style>
+</head>
+<body>
+
+<div id="progressbar"></div>
+<button id="numButton">Random Value - Determinate</button>
+<button id="falseButton">Indeterminate</button>
+<button id="colorButton">Random Color</button>
+
+<div class="demo-description">
+<p>Indeterminate progress bar and switching between determinate and indeterminate styles.</p>
+</div>
+</body>
+</html>
diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html
index 5080520c2..df3483816 100644
--- a/demos/progressbar/index.html
+++ b/demos/progressbar/index.html
@@ -10,6 +10,7 @@
 	<li><a href="default.html">Default functionality</a></li>
 	<li><a href="animated.html">Animated</a></li>
 	<li><a href="resize.html">Resizable progressbar</a></li>
+	<li><a href="indeterminate.html">Indeterminate</a></li>
 </ul>
 
 </body>
diff --git a/tests/unit/progressbar/progressbar_events.js b/tests/unit/progressbar/progressbar_events.js
index bb0d3ca5c..fe05182a1 100644
--- a/tests/unit/progressbar/progressbar_events.js
+++ b/tests/unit/progressbar/progressbar_events.js
@@ -23,7 +23,7 @@ test( "change", function() {
 });
 
 test( "complete", function() {
-	expect( 3 );
+	expect( 4 );
 	var value,
 		changes = 0,
 		element = $( "#progressbar" ).progressbar({
@@ -32,12 +32,14 @@ test( "complete", function() {
 				deepEqual( element.progressbar( "value" ), value, "change at " + value );
 			},
 			complete: function() {
-				equal( changes, 2, "complete triggered after change" );
+				equal( changes, 3, "complete triggered after change and not on indeterminate" );
 			}
 		});
 
 	value = 5;
 	element.progressbar( "value", value );
+	value = false;
+	element.progressbar( "value", value );
 	value = 100;
 	element.progressbar( "value", value );
 });
diff --git a/themes/base/images/animated-overlay.gif b/themes/base/images/animated-overlay.gif
new file mode 100644
index 000000000..d441f75eb
--- /dev/null
+++ b/themes/base/images/animated-overlay.gif
diff --git a/themes/base/jquery.ui.progressbar.css b/themes/base/jquery.ui.progressbar.css
index f042a120f..5aba50cdf 100644
--- a/themes/base/jquery.ui.progressbar.css
+++ b/themes/base/jquery.ui.progressbar.css
@@ -9,11 +9,20 @@
  * http://docs.jquery.com/UI/Progressbar#theming
  */
 .ui-progressbar {
-	height:2em;
+	height: 2em;
 	text-align: left;
 	overflow: hidden;
 }
 .ui-progressbar .ui-progressbar-value {
 	margin: -1px;
+	height:100%;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-overlay {
+	background: url("images/animated-overlay.gif");
 	height: 100%;
+	filter: alpha(opacity=25);
+	opacity: 0.25;
+}
+.ui-progressbar .ui-progressbar-indeterminate {
+	background-image: none;
 }
diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js
index 6c3d7dadd..0b1ee8aba 100644
--- a/ui/jquery.ui.progressbar.js
+++ b/ui/jquery.ui.progressbar.js
@@ -36,7 +36,7 @@ $.widget( "ui.progressbar", {
 				"aria-valuenow": this.options.value
 			});
 
-		this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
+		this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><div></div></div>" )
 			.appendTo( this.element );
 
 		this.oldValue = this.options.value;
@@ -71,16 +71,19 @@ $.widget( "ui.progressbar", {
 			val = newValue;
 		}
 
+		this.indeterminate = val === false;
+
 		// sanitize value
 		if ( typeof val !== "number" ) {
 			val = 0;
 		}
-		return Math.min( this.options.max, Math.max( this.min, val ) );
+		return this.indeterminate ? false : Math.min( this.options.max, Math.max( this.min, val ) );
 	},
 
 	_setOptions: function( options ) {
 		var val = options.value;
 
+		// Ensure "value" option is set after other values (like max)
 		delete options.value;
 		this._super( options );
 
@@ -106,26 +109,36 @@ $.widget( "ui.progressbar", {
 	},
 
 	_percentage: function() {
-		return 100 * this.options.value / this.options.max;
+		return this.indeterminate ? 100 : 100 * this.options.value / this.options.max;
 	},
 
 	_refreshValue: function() {
-		var percentage = this._percentage();
+		var value = this.options.value,
+			percentage = this._percentage(),
+			overlay = this.valueDiv.children().eq( 0 );
+
+		overlay.toggleClass( "ui-progressbar-overlay", this.indeterminate );
+		this.valueDiv.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
 
-		if ( this.oldValue !== this.options.value ) {
-			this.oldValue = this.options.value;
+		if ( this.oldValue !== value ) {
+			this.oldValue = value;
 			this._trigger( "change" );
 		}
-		if ( this.options.value === this.options.max ) {
+		if ( value === this.options.max ) {
 			this._trigger( "complete" );
 		}
 
 		this.valueDiv
-			.toggle( this.options.value > this.min )
-			.toggleClass( "ui-corner-right", this.options.value === this.options.max )
+			.toggle( this.indeterminate || value > this.min )
+			.toggleClass( "ui-corner-right", value === this.options.max )
 			.width( percentage.toFixed(0) + "%" );
-		this.element.attr( "aria-valuemax", this.options.max );
-		this.element.attr( "aria-valuenow", this.options.value );
+		if ( this.indeterminate ) {
+			this.element.removeAttr( "aria-valuemax" );
+			this.element.removeAttr( "aria-valuenow" );
+		} else {
+			this.element.attr( "aria-valuemax", this.options.max );
+			this.element.attr( "aria-valuenow", value );
+		}
 	}
 });