Skip to content
On this page

Loading Indicators

Loading indicators express an unspecified wait time of a process.

Animation of loading indicator

Contents

Using loading indicators

Before you can use Material loading indicators, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Loading indicators inform users about the indeterminate ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. It's recommended as a replacement for indeterminate circular progress indicators.

Note: Use progress indicators, if the processes can transition from indeterminate to determinate.

Usage

A loading indicator can be added to a layout:

xml
<!-- Loading indicator (uncontained) -->
<com.google.android.material.loadingindicator.LoadingIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Animation of uncontained loading indicator

xml
<!-- Loading indicator with a container -->
<com.google.android.material.loadingindicator.LoadingIndicator
    style="@style/Widget.Material3.LoadingIndicator.Contained"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Animation of contained loading indicator

Making loading indicators accessible

Loading indicators have support very limited user interactions. Please consider setting the content descriptor for use with screen readers.

That can be done in XML via the android:contentDescription attribute or programmatically like so:

kt
loadingIndicator.contentDescription = contentDescription

For contained loading indicators, please ensure the indicator color and the container color have enough contrast (3:1).

Loading indicators

Loading indicators capture attention through motion. It morphs the shape in a sequence with potential color change, if multiple colors are specified for the indicator. A fully rounded container is optionally drawn behind the morphing shape.

Source code:

Anatomy and key properties

A loading indicator consists of an optional container and an indicator.

Loading indicator anatomy

  1. Active indicator
  2. Container

Attributes

ElementAttributeRelated method(s)Default value
Indicator colorapp:indicatorColorsetIndicatorColorgetIndicatorColorcolorPrimary
Container colorapp:containerColorsetContainerColorgetContainerColortransparent
Indicator sizeapp:indicatorSizesetIndicatorSizegetIndicatorSize38dp
Container widthapp:containerWidthsetContainerWidthgetContainerWidth48dp
Container heightapp:containerHeightsetContainerHeightgetContainerHeight48dp

Styles

ElementStyle
Default styleWidget.Material3.LoadingIndicator
Contained styleWidget.Material3.LoadingIndicator.Contained

Default theme attribute: ?attr/loadingIndicatorStyle

See the full list of styles and attributes.

Loading Indicators has loaded