Progress Dots

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?

Last updated: Nov 28, 2023