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.6.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

The following examples show progress dots in different sizes and configurations.

The following example shows how you could position AlexaProgressDots over your content, and then make it visible to indicate that content is loading. Click the button to make the progress dots display over the content. Refresh the page or change viewports to restart the example. In an actual skill, the SendEvent command sends a request to the skill, and then skill could load content, and return the ExecuteCommands directive with commands to reset the display and hide the progress dots.