Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›UI Components

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Terminal / Command Line
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Adobe AIR
    • Android
    • Electron
    • HashLink VM
    • iOS
    • Linux
    • macOS
    • Neko VM
    • Web
    • Windows
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • ActivityIndicator
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • DatePicker
  • HDividedBox / VDividedBox
  • Drawer
  • Form / FormItem
  • GridView
  • GroupListView
  • Header
  • HierarchicalItemRenderer
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • NumericStepper
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpDatePicker
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeGridView
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • FlowRowsLayout
  • FormLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout
  • Layout Data
  • Custom layouts

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Animation

  • Navigator animated transitions
  • Custom navigator transitions

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • Focus management
  • haxedef options
  • Displaying pop-ups
  • Semantic versioning
  • Tool-tips
  • Cookbook
  • Install Prerelease Builds
Edit

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.

Related Links

  • feathers.controls.ActivityIndicator API Documentation
Last updated on 3/16/2023
← Intro to UI componentsAlert →
  • The Basics
  • Styles
    • Skin
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
  • Mastodon
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2023 Bowler Hat LLC — Illustrations by unDraw.