Progress Dots

The Alexa progress dots responsive component (AlexaProgressDots) displays animated dots to indicate an action is in progress.

Import the alexa-layouts package

To use AlexaProgressDots, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.2.0. AlexaProgressDots was introduced in version 1.2.0.

AlexaProgressDots parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

accessibilityLabel

String

accessibilityLabel

An accessibility label to describe the progress dots to customers who use a screen reader.

1.2.0

componentId

String

AlexaProgressDots

A unique ID for this component. Provide a separate, unique ID for each instance of AlexaProgressDots in the same document.

1.2.0

dotSize

Dimension

32dp

Size of the progress dots.

1.2.0

entities

Array

[]

Array of entity data to bind to this component.

1.2.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

1.2.0

AlexaProgressDots example

{
  "type": "AlexaProgressDots",
  "dotSize": "72dp",
  "componentId": "largeDotsId",
  "spacing": "@spacingMedium"
}

This example illustrates a complete document that displays progress dots in different sizes.

To see the animation, copy the sample JSON into the authoring tool.

Four examples of AlexaProgressDots
Four examples of AlexaProgressDots