How to use the ActivityIndicator component

The ActivityIndicator displays an animation to indicate that an activity of indeterminate length is currently happening. The animation remains active while the activity indicator is added to the display list — unless its enabled property is set to false.

Live preview of the ActivityIndicator component

⚠️ Beta Notice: This component is still quite new to Feathers UI. It was included in the latest release because it should be stable enough for production use. However, some APIs may go through minor changes in upcoming releases — based on feedback from developers like you. Learn more about Beta APIs.

The Basics

Create an ActivityIndicator control and add it to the display list.

var activity = new ActivityIndicator();
addChild(activity);

To customize the duration (in seconds) of the activity indicator's animation, set the indeterminateDuration property.

activity.duration = 1.0;

Styles

A small number of styles may be customized on an ActivityIndicator component, including a skin.

Skin

Optionally give the activity indicator a custom skin using the activitySkin property. The following example sets it to a DotsActivitySkin instance.

var skin = new DotsActivitySkin();
skin.numDots = 8;
skin.dotRadius = 3.0;
skin.endDotRadius = null;
skin.dotColor = 0x333333;
skin.endDotColor = null;
skin.dotAlpha = 1.0;
skin.endDotAlpha = 0.0;
var size = 1.1 * activitySkin.dotRadius * activitySkin.numDots;
skin.width = size;
skin.height = size;
skin.activitySkin = activitySkin;

Custom Skins

Any display object may be passed to the activitySkin property. By default, the skin's alpha value will repeatedly fade in and out. However, if a custom skin implements the IIndeterminateSkin interface, it can control its own animation. For instance, the DotsActivitySkin used in the example above rotates its content over time.