Radial Progress

Ever want a progress bar that goes in a circle? No? Well, you have one here anyway!

I built this progress bar because I wanted something to show a control that reminded the user of time ticking by. This was my idea for that. Maybe it's useful for you, too.

Features

Multiple Color Stops: Specify the from (in arc values, not percentages for better granularity), with color values for progress, outline and background.
Cross-Browser!: Behind the scenes it uses Y.Graphics which delegates to SVG, Canvas or even VML!
No code to host!: All on the YUI CDN, with proper loading. Below is a simple example you can copy and paste into your page to get a radial progres pie!

Visit the Radial Progress YUI Gallery Page for more information.

What powers this page?

All the JavaScript you need (you don't have to host anything, let the YUI CDN do that):

<script type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use('gallery-radial-progress', function(Y) {
    var progress = Y.RadialProgress().render('#output'),
        timer;
        
    timer = Y.later(100, progress, function() {
        progress.increment();
    }, null, true);
});
</script>

Here's the actual code powering this page