YUI Library Home

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

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:

var pbvu = [],i,NUM_BARS= 8; for (i = 0; i < NUM_BARS;i++) { // Creating the ProgressBar instance pbvu[i] = new YAHOO.widget.ProgressBar({ direction:'btt', width:20, height:80, anim:true // with animation }).render('vumeter'); // Setting the duration of the animation pbvu[i].get('anim').duration = 0.3; } // Method that recalculates the new end values for the bars // The animation utility will itself take care of the movement var redrawVUs = function() { var points = [],i; for (i=0;i<4;i++) { points[i] = [i,Math.random() * 100]; } for (i = 0;i < NUM_BARS;i++) { pbvu[i].set('value',YAHOO.util.Bezier.getPosition(points,i/(NUM_BARS-1))[1]); } }; // We redraw the bars when the last one completes pbvu[NUM_BARS -1].on('complete',redrawVUs); // and draw them a first time. redrawVUs();

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.

#vumeter { padding:3px; margin:10px; border: medium ridge silver;_border:none; overflow:hidden; } #vumeter .yui-pb { margin:3px; float:left; } #vumeter .yui-pb-bar { background-image: url(../progressbar/assets/vumeter.png); }

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### ProgressBar Control Examples:

- Basic Features
- Events
- Ratings
- VU Meters

### More ProgressBar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings