Progress Dots

Note: Learn how to improve your skills with APL with Build visually rich experiences using APL at the Alexa Learning Lab.

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

Compatibility

AlexaProgressDots is designed to work with all standard viewport profiles in the alexa-viewport-profiles package:

All hub round profiles
All hub landscape profiles
All hub portrait profiles
All mobile profiles
All TV profiles

If you use AlexaProgressDots on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaProgressDots, import the alexa-layouts package.

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

AlexaProgressDots parameters

All parameters except type are optional.

Name	Type	Default	Description	Widget support	Version added
`accessibilityLabel`	String	`accessibilityLabel`	An accessibility label to describe the progress dots to customers who use a screen reader.	Not supported	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.	Not supported	1.2.0
`dotSize`	Dimension	`32dp`	Size of the progress dots.	Not supported	1.2.0
`entities`	Array	—	Array of entity data to bind to this component.	Not supported	1.2.0
`theme`	String	`dark`	Set the dark or light color theme. The selected theme controls the colors used for the component.	Not supported	1.2.0
`type`	String	—	Always set to `AlexaProgressDots`.	Not supported	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.

Was this page helpful?

Provide feedback

Last updated: Nov 28, 2023