Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Radial Progress (gallery-radial-progress) on cdn

Last Updated: 07/13/12

+ 0 -

J. Shirley

YUI Contributor

See 8 more by this user.

Created: 07/13/12
Last CDN Push: 07/18/12
Build Tag: gallery-2012.07.18-13-22
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

The radial progress bar is a good way to indicate time counting down with multiple color patterns. You simply tell it what percentage is complete and it fills in the pie chart accordingly.

Right now it goes anti-clockwise by default because it's meant to signify time running out (a clock running backwards). However, you can make it go clockwise by inverting the direction and calling decrement, it runs in both directions!

Tags:
jshirley

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.18-13-22'
}).use('gallery-radial-progress', function(Y) {
    var progress = Y.RadialProgress().render('#output'),
        timer;
 
    timer = Y.later(100, progress, function() {
        progress.increment();
    }, null, true);
});