Progress Bar examples - Basic Features

This example shows the simplest ProgressBar with the default skin, with a control box that allows you to change various settings.

Control

Value

Set: 50   Actual 50

Range

Min: 0   Max: 100

Size

Width

Height

Width: 200px   Height: 20px

Animation

Enable animation

Duration

Duration 200 second(s)

Acceleration

Enable acceleration

Speed

Speed: 1

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:

var pb = new YAHOO.widget.ProgressBar({value:50}).render('basic');

Most of the code in 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 property 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:

pb.set('value',valueSlider.getValue()); pb.set('minValue',rangeSlider.minVal); pb.set('maxValue',rangeSlider.maxVal); pb.set('width',widthSlider.getValue()); pb.set('height',heightSlider.getValue()); pb.set('anim',checkBoxEl.checked); var anim = pb.get('anim'); if (anim) { anim.duration = durationSlider.getValue(); } var anim = pb.get('anim'); if (anim) { anim.method = YAHOO.util.Easing[inputEl.value]; }

In all cases, the scaling factors from the pixel range of the Sliders to the values used for the ProgressBar have been omitted. Most values are set directly, those related to animation are set depending on the existence of an Anim object. The anim attribute, while it receives a boolean it returns the current instance of Anim. 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 whichever the actual value was read from the ProgressBar itself.