YUI Library Home

Site Search (YDN & YUIBlog):

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

View example in new window.

Control
Value

Set: 50 Actual 50

Range

Min: -50 Max: 50

Size Width
Height

Width: 200px

Height: 20px

Animation

Enable animation

Duration

Duration 200 second(s)

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

pb.set('value',valueSlider.getValue()); pb.set('minValue',rangeSlider.minValue); pb.set('maxValue',rangeSlider.minValue); 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 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.

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