Added some user interaction to the demo page.

index.html

@@ -40,6 +40,19 @@ <h2>Demos</h2>
 		</li>
 	</ul>
 
+	<h2>Dynamic demo</h2>
+	<ul>
+		<li id="dynamicProgress">
+			<label>Progress: <span class="percentage">0</span>%
+				<progress value="0" max="100"></progress>
+			</label>
+		</li>
+	</ul>
+	<p>
+	   <button id="animateFully">Animate to 100%</button>
+	   <button id="animateToUserInput">Animate to...</button>
+	</p>
+
 	<h2>Features</h2>
 	<ul>
 		<li>Accessible (WAI-ARIA-enabled)</li>
@@ -70,5 +83,6 @@ <h2>Unit tests</h2>
 
 	<script src="progress-polyfill.js"></script>
 	<script src="tests.js"></script>
+	<script src="user-interaction.js"></script>
 </body>
 </html>

user-interaction.js

@@ -0,0 +1,44 @@
+/*
+ * Interaction demos for the <progress> polyfill
+ * Demonstrates setting the progress value through Javascript
+ * @author Espen Hovlandsdal http://rexxars.com
+ */
+(function(d) {
+    var bind = function(el, event, fn) {
+        if (el.addEventListener) {
+            el.addEventListener(event, fn, false);
+        } else {
+            el.attachEvent('on' + event, fn)
+        }
+    };
+
+    var dyn  = d.getElementById('dynamicProgress'), timer, progress = 0;
+    var el   = dyn.getElementsByTagName('progress')[0];
+    var perc = dyn.getElementsByClassName('percentage')[0];
+
+    var progressTo = function(to) {
+        clearInterval(timer);
+        var inc = to < el.value ? -1 : 1;
+
+        timer = setInterval(function() {
+            progress += inc;
+            el.value = progress;
+
+            perc.innerHTML = progress;
+
+            if (progress == to) {
+                return clearInterval(timer);
+            }
+        }, 25);
+    };
+
+    bind(d.getElementById('animateFully'), 'click', function() {
+        progressTo(100);
+    });
+
+    bind(d.getElementById('animateToUserInput'), 'click', function() {
+        var to = parseInt(prompt('How many percent?', 50), 10);
+        progressTo(Math.max(0, Math.min(100, to)));
+    });
+
+})(document);