YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: ProgressBar Control: VU Meters

ProgressBar Control: VU Meters

Multiple instances of ProgressBar can be grouped together and animated for a dynamic interface.

Here we draw a set of several ProgressBars with direction set to move from bottom to top ('btt'). We set up the Animation Utility to handle the movement for us. In order to produce a more realistic movement, instead of giving random values to each of the bars independently, we are using Animation's own Bezier function to calculate a Bezier curve based on four random points, then we take eight evenly spaced points from that curve to use as values for each bar.

To keep the bars moving, we listen for the complete event that signals the end of an animation to start a new animation.

The code for this example is:

Custom CSS defines the background image of the bar itself, groups the instances in a line with suitable spacing and encloses the set within a common border.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

ProgressBar Control Examples:

More ProgressBar Control Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings