How to use the HProgressBar and VProgressBar components
VProgressBar classes display a visual indicator of the percentage of a task that has been completed.
For simplicity, the example code on this page will always use
HProgressBar, but the same APIs are available on
First, let's create an
HProgressBar control, set up its range of values, and add it to the the display list.
var progressBar = new HProgressBar(); progressBar.minimum = 0.0; progressBar.maximum = 100.0; progressBar.value = 50.0; addChild(progressBar);
value property indicates the current value of the progress bar, while the
maximum properties establish a range of possible values.
The skins for the
VProgressBar components are divided into two main parts: the background and the fill.
Give the progress bar a background using the
backgroundSkin property. The following example sets it to a
var skin = new RectangleSkin(); skin.border = SolidColor(1.0, 0x999999); skin.fill = SolidColor(0xcccccc); skin.width = 120.0; skin.height = 16.0; progressBar.backgroundSkin = skin;
fill properties of the
RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.
The progress bar automatically calculates its preferred size based on the initial dimensions of its background skin, so it's important to set a skin's
height properties to appropriate values to use in this calculation.
See Skinning with common shapes for more details about how to use
FillStyleenums that change its border and fill appearance.
Style the progress bar's fill using the
fillSkin property. The following example sets it to a
var skin = new RectangleSkin(); skin.border = SolidColor(1.0, 0x9999cc); skin.fill = SolidColor(0xcccccc); skin.width = 16.0; skin.height = 16.0; progressBar.fillSkin = skin;