Indicator

Indicators are elements, not really components. There are 4 types of Indicators:

• Activity Indicator: An animated image displayed in center of a screen.
• Badge or Count: A count bubble displayed on list items, list headers, icons, Panel items, carousel items.
• Progress Bar: Not part of MAF, but style for more native progress bars.
• Required Field: A required field indicator on a field in a Form.

Appearance

Appearance characteristics for this component.

Activity Indicator

• Bar: The bar has a circular shape and contains a blue gradient fill that animates clockwise in the bar.
• Background: The image is a square with rounded corners.
• Position: The indicator will be centered on the page.
• Page Background: The page does not dim by default when the activity indicator is shown.

Badge or Count

• Text: The count number is displayed to the right of the list header.

Progress Bar

• Support: Progress bars are not currently supported in MAF.

Required Field

• Circle: A red circle is displayed to the left of the Label.

Behavior

Common behaviors for this component.

Activity Indicator

• Start: It should appear and animate when a process begins.
• End: It should disappear when the process is over.
• Animation: It should not stop animating (i.e. spinning) during the process.
• Time: It does end after specific amount of time.

Badge or Count

• None

Progress Bar

• Start: It should appear when a process begins.
• End: It should disappear when the process is over.
• Animation: The progress bar should animate from one side to the other side.

Required Field

• No Label: If no label is present, the red circle is presented to the left of the value.

Usage

Usage guidelines for this component.

Activity Indicator

• The activity indicator should appear when a short (usually one to ten seconds) process begins.
• Consider placement of the activity indicator on the screen so that it is noticed.
• Use when there is lazy loading of images or content on the page.
• The activity indicator informs the user the process has begun/is active that will delay the user due to technical constraints. The user may wait for this process to finish.

Badge or Count

• Count bubbles indicate the number of new items an object may have.

Progress Bar

• It should appear and animate when a process begins.

Required Field

• Indicates which fields are required in order to complete a task.

Sample

AMX sample code for this component.

• None

Related

• Used On: Phone, Tablet
• Also Called: Status Indicator
• Related Components: Image
• Resources: None