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: Basic Features

ProgressBar Control: Basic Features

This example shows the simplest ProgressBar with the default "Sam" skin. Use the controls below to change various settings.

Control
Value

 

Range

 

Size Width
Height

Animation

Enable animation

Duration

Easing easeNone
backBoth
backIn
backOut
bounceBoth
bounceIn
bounceOut
easeBoth
easeBothStrong
easeIn
easeInStrong
easeOut
easeOutStrong
elasticBoth
elasticIn
elasticOut

The ProgressBar itself is created with this code:

Most of the code for this example deals with handling the interface, the sliders and other input controls. When a value is changed, it is simply applied to the corresponding attribute of the ProgressBar. The ProgressBar responds when the slider is released, not while it is moving. Leaving aside all the interface details, these are the statements that deal with those settings:

In all cases, the scaling factors used to convert the slider pixel values to the values used for the ProgressBar have been omitted. The anim attribute, while it receives a boolean, returns either an instance of Animation or null. The value attribute of the radio buttons for selecting the easing method have been set to the actual names of the methods so it is easy to locate them in the YAHOO.util.Easing object. The ProgressBar rejects values outside of the range given by minValue and maxValue so the slider goes back to the current value read from the ProgressBar itself.

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