How to use the HProgressBar and VProgressBar components

The HProgressBar and VProgressBar classes display a visual indicator of the percentage of a task that has been completed.

Live preview of the HProgressBar and VProgressBar components

The Basics

For simplicity, the example code on this page will always use HProgressBar, but the same APIs are available on VProgressBar too.

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);

The value property indicates the current value of the progress bar, while the minimum and maximum properties establish a range of possible values.

Styles

The skins for the HProgressBar and VProgressBar components are divided into two main parts: the background and the fill.

Background

Give the progress bar a background using the backgroundSkin property. The following example sets it to a RectangleSkin instance.

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;

The border and 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 width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

Fill

Style the progress bar's fill using the fillSkin property. The following example sets it to a RectangleSkin instance.

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;