Scripting value of styled & unstyled HTML5 <progress> elements
Note: As of October 2010, only works in Chrome. Works worst in Safari. Firefox and Opera have OK fallbacks.
HTML
<footer>
<address><a href="http://weston.ruter.net/">Weston Ruter</a> (@<a href="http://twitter.com/westonruter">westonruter</a>), <a href="http://x-team.com/">X-Team</a>/<a href="http://xhtmlized.com/">XHTMLized</a></address>
<small>Inspired by <a href="http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit">Customizing web forms with CSS3 and WebKit</a></small>
</footer>
JavaScript
function makeProgress(){
$('progress').attr('value', function(i, value){
value = Number(value) + Number($(this).attr('step'));
if(value > Number($(this).attr('max'))){
value = Number($(this).attr('min'));
}
// Next apparently still required by Firefox;
// Opera honors: progress { content:attr(value) "%"; }
$(this).text(value + '%');
return value;
});
}
setInterval(makeProgress, 100);