Progress indicators

Progress indicators express an unspecified wait time or display the length of a process.

Android check Web Flutter iOS

Usage

Progress indicators inform users about the status of 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.

Progress as a group

When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity.

Principles

Informative

Progress indicators look and animate in ways that reflect the status of a process. They are never simply decorative.

Animated

Progress indicators use animation to capture attention and inform users of an activity’s progress.

Consistent

Progress indicators should be applied to all instances of a process (such as loading) in a consistent format (linear or circular).


Types

Material Design offers two visually distinct types of progress indicators: linear and circular progress indicators. Only one type should represent each kind of activity in...

Linear and circular

Material Design offers two visually distinct types of progress indicators: linear and circular progress indicators. Only one type should represent each kind of activity in an app. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the app.

1. Linear indicator
2. Circular indicator

Determinate and indeterminate

Progress indicators may be determinate or indeterminate:

Determinate indicators

Determinate indicators display how long a process will take. They should be used when the process completion rate can be detected.

Indeterminate indicators

Indeterminate indicators express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

1. Determinate progress indicators fill from 0 to 100%.
2. Indeterminate progress indicators move along a fixed track, growing and shrinking in size.

As more information about a process becomes available, a progress indicator can switch from an indeterminate to a determinate state.

A linear progress indicator changes from indeterminate to determinate while loading a screen.

Linear progress indicators

Anatomy

The track is a fixed width rule, with set boundaries for the indicator to travel along. The indicator animates along the length of the track.

Linear progress indicators are composed of two required elements:

1. Track
The track is a fixed width rule, with set boundaries for the indicator to travel along.

2. Indicator
The indicator animates along the length of the track.


Behavior

Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on...

Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.


Types

Linear progress indicators support both determinate and indeterminate operations.

Linear progress indicators support both determinate and indeterminate operations.

  • Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.
  • Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.
Determinate linear progress indicator
Indeterminate linear progress indicator

Placement

The placement of a linear progress indicator can indicate the scope of a process. For example:

The placement of a linear progress indicator can indicate the scope of a process. For example:

  • A linear indicator at the center of the screen can indicate loading all screen content
  • A linear indicator attached to a container, such as a card, can indicate the process applies to that particular item (and that interaction with the rest of the UI is possible)
  • Expanding items can place a linear indicator along their expanding edge to draw user attention to where new content will appear
To indicate that loading affects the whole screen, a linear indicator can be placed in the background.
To focus user attention, a linear indicator is recommended for displaying item expansion onto larger surfaces, such as desktop.

Circular progress indicators

Behavior

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a...

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

On Android, the “swipe to refresh” gesture displays a circular progress indicator to indicate that the UI is being refreshed.


Types

Circular progress indicators support both determinate and indeterminate processes.

Circular progress indicators support both determinate and indeterminate processes.

  • Determinate circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
  • Indeterminate circular indicators grow and shrink in size while moving along the invisible track.
Determinate circular progress indicator
Indeterminate circular progress indicator

Placement

Circular progress indicators are positioned to indicate the process that they represent. Buttons allow users to take actions with a single tap. Related Article arrow_downward...

Circular progress indicators are positioned to indicate the process that they represent:

  • When centered on the screen, they indicate the initial loading of screen content.
  • When placed above or below existing content, they draw attention to where new content will appear.
A circular indicator centered on screen indicates an initial loading process.
An indicator appears where new items will appear, at the end of the current items grid.

Integrating with actions

A circular indicator can be integrated into a button or actionable icon to express a connection between an interaction and a specific item. They are typically used to express when an interaction, such as clicking a button again, isn’t available.

They should be used for short, indeterminate activities (between 2-5 seconds). Longer activities may require alternate methods of communication, such as snackbars or notifications.

DoUse circular indicators for short, indeterminate activities (< 5 seconds) requiring user attention.
Don'tDon’t apply progress indicators to every button in your app. They can unnecessarily interrupt the user’s task.

Specs

Circular indicators

  • 4848
  • 4848
 

Determinate indicators

  • Measurement 4
  • Measurement 144
  • Measurement 240
 

Indeterminate indicators

  • Measurement 4
  • Measurement 240
  • Measurement 112
 

Using progress indicators

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

Progress indicators inform users about the status of 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.

Note: When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity.

Usage

Animation of determinate linear and circular progress indicators: purple
indicators fill up grey
tracks

A determinate progress indicator can added in a layout like so:

Animation of indeterminate linear and circular progress indicators: purple
indicators travel along grey
tracks

An indeterminate progress indicator can be added like so:

Switching from indeterminate to determinate

Animation of linear and circular progress indicators: purple indicators travel
along gray tracks then fill up
tracks.

Indeterminate progress indicators can smoothly transit to determinate progress indicators by setting the progress programmatically:

Note: Once indeterminate progress indicators are switched to the determinate mode (or initialized as determinate), they can be set back to indeterminate mode via calling the setIndeterminate(false) method. However, in order to keep the smoothness of animation, they need to be set INVISIBLE or GONE via the setVisibility or hide methods first.

Making progress indicators accessible

Progress indicators inherit accessibility support from the ProgressBar class in the framework. 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:

Showing/hiding the progressindicator

By default, the progress indicator will be shown or hidden without animations. You can change the animation behaviors via app:showAnimationBehavior (or setShowAnimationBehavior method) and app:hideAnimationBehavior (or setHideAnimationBehavior method).

The modes of behaviors are:

  • none (default) - shows/hides the view immediately when the visibility is being changed via show, hide or setVisibility method.
  • outward - for the linear type, shows the view by expanding from the baseline (or bottom edge) and hides the view by collapsing to the top edge; for the circular type, shows the view by expanding from the inner edge and hides the view by collapsing to the outer edge.
  • inward - for the linear type, shows the view by expanding from the top edge and hides the view by collapsing to the baseline (bottom edge); for the circular type, shows the view by expanding from the outer edge and hides the view by collapsing to the inner edge.

When the hide animation behavior is not none, the visibility of the view will be changed after the animation finishes. Please use setVisibilityAfterHide method to set the target visibility as Visibiltiy.INVISIBLE (default) or Visibility.GONE.

Rounded corners

Linear and circular progress indicators: tracks and indicators have rounded
corners

Progress indicators can have rounded corners via app:trackCornerRadius or the setTrackCornerRadius method.

Types

Material Design offers two visually distinct types of progress indicators: 1. linear 2. circular

Only one type should represent each kind of activity in an app. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the app.

Composite image of linear and circular progress indicator types

Linear progress indicators

Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.

Linear progress indicators support both determinate and indeterminate operations.

  • Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.
  • Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.

Source code:

The following example shows a determinate linear progress indicator.

Determinate linear progress indicator animation: purple indicator fills up
grey track

In the layout:

The following example shows an indeterminate linear progress indicator.

Indeterminate linear progress indicator animation: purple indicator travels
along grey track

In the layout:

Multi-color indeterminate animation type

For linear progress indicator, there are two indeterminate animation types:

Disjointed indeterminate linear progress indicator animation: red indicator
travels along track 2x then switches to
yellow

  • disjoint - animates as repeated cycles with two disjoint segments in the same color at a time.

Contiguous indeterminate linear progress indicator animation: red, yellow,
blue indicators move sequentially and cover
track

  • contiguous - animates as repeated cycles with three adjacent segments in iterative different colors.

Note: There is a minimum requirement of 3 indicator colors to use the contiguous animation. Otherwise, an IllegalArgumentException will be thrown.

Circular progress indicators

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

Circular progress indicators support both determinate and indeterminate processes.

  • Determinate circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
  • Indeterminate circular indicators grow and shrink in size while moving along the invisible track.

Source code:

The following example shows a determinate circular progress indicator.

Determinate circular progress indicator animation: purple indicator draws a
circle clockwise from the
top

In the layout:

The following example shows an indeterminate circular progress indicator.

Indeterminate circular progress indicator animation: purple indicator follows
a circle clockwise from the
top

In the layout:

Anatomy and key properties

A progress indicator consists of a track and an indicator.

Progress indicator anatomy composte

  1. Track
  2. Indicator

Common attributes

The following attributes are shared between linear and circular progress indicators:

ElementAttributeRelated method(s)Default value
Track thicknessapp:trackThicknesssetTrackThickness
getTrackThickness
4dp
Indicator colorapp:indicatorColorsetIndicatorColor
getIndicatorColor
colorPrimary
Track colorapp:trackColorsetTrackColor
getTrackColor
indicatorColor at disabledAlpha
Track corner radiusapp:trackCornerRadiussetTrackCornerRadius
getTrackCornerRadius
0dp
Show animation behaviorapp:showAnimationBehaviorsetShowAnimationBehavior
getShowAnimationBehavior
none
Hide animation behaviorapp:hideAnimationBehaviorsetHideAnimationBehavior
getHideAnimationBehavior
none
Delay (in ms) to showapp:showDelayN/A0
Min delay (in ms) to hideapp:minHideDelayN/A0

Linear type specific attributes

Linear type progress indicators also have the following attributes:

ElementAttributeRelated method(s)Default value
Indeterminate animation typeapp:indeterminateAnimationTypesetIndeterminateAnimationType
getIndeterminateAnimationType
disjoint
Indicator directionapp:indicatorDirectionLinearsetIndicatorDirection
getIndicatorDirection
leftToRight

Circular type specific attributes

Circular type progress indicators also have the following attributes:

ElementAttributeRelated method(s)Default value
Spinner size (outer diameter)app:indicatorSizesetIndicatorSize
getIndicatorSize
40dp
Insetapp:indicatorInsetsetIndicatorInset
getIndicatorInset
4dp
Indicator directionapp:indicatorDirectionCircularsetIndicatorDirection
getIndicatorDirection
clockwise

Styles

ElementStyle
Default linear
style
Widget.MaterialComponents.LinearProgressIndicator
Default circular
style
Widget.MaterialComponents.CircularProgressIndicator
Medium circular
style
Widget.MaterialComponents.CircularProgressIndicator.Medium
Small circular
style
Widget.MaterialComponents.CircularProgressIndicator.Small
Extra small circular
style
Widget.MaterialComponents.CircularProgressIndicator.ExtraSmall

Default linear style theme attribute: ?attr/linearProgressIndicatorStyle

Default circular style theme attribute: ?attr/circularProgressIndicatorStyle

See the full list of styles and attributes.

Theming

Progress indicators support Material theming and can be customized in terms of color and size.

Progress indicator theming example

The following example shows a circular progress indicator with Material Theming.

"Circular progress indicator animation: pink circle segment circles center,
then pink circle segment fills
circle"

Implementing progress indicator theming

Using theme attributes and style sin res/values/styles.xml (themes all circular progress indicators and affects other components):

or using a default stype theme attribute, styles and a theme overlay (themes all circular progress indicators but does not affect other components):

or using the style in the layout (affects only this specific circular progress indicator):

No Android implementation guidance available

Installation

Basic Usage

MDCProgressIndicatorFoundation API

MDC Progress Indicator Foundation exposes the following methods:

Method SignatureDescription
setDeterminate(value: boolean) => voidToggles the component between the determinate and indeterminate state.
isDeterminate() => booleanWhether or not the component is in determinate state.
setProgress(value: number) => voidSets the progress to this value. Value should be between [0, 1].
getProgress() => numberThe current progress value in the interval [0,1].
open() => voidPuts the component in the open state.
close() => voidPuts the component in the closed state.
isClosed() => booleanWhether or not the progress indicator is closed.

MDCProgressIndicator Component API

MDC Progress Indicator exposes the following API:

Method SignatureDescription
determinate: booleanWhether the indicator is in the determinate or indeterminate state.
progress: numberThe current progress. Value should be between [0, 1].
open() => voidPuts the component in the open state.
close() => voidPuts the component in the closed state.
No Web implementation guidance available

Using progress indicators

Progress indicators inform users about the status of 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.

Making progress indicators accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

Types

Material Design offers two visually distinct types of progress indicators: 1. linear 2. circular progress indicators. Only one type should represent each kind of activity in an app. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the app.

Composite image of progress indicator types

Flutter implements these as subtypes of the ProgressIndicator class.

Anatomy and key properties

The following is an anatomy diagram of a linear progress indicator:

Linear progress indicator anatomy

A linear progress indicator consists of the following:

  1. Track
  2. Indicator

Linear track

The track is a fixed width rule, with set boundaries for the indicator to travel along.

 Property
ColorbackgroundColor

Linear indicator

The indicator animates along the length of the track.

 Property
ColorvalueColor and use the class AlwaysStoppedAnimation<>()

Linear progress indicators

Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.

  • Linear progress indicators support both determinate and indeterminate operations.
  • Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.
  • Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.

Linear progress indicator example

LinearProgressIndicator

The following example shows an indeterminate linear progress indicator:

Linear Progress Indicator

Circular progress indicators

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

  • Circular progress indicators support both determinate and indeterminate processes.
  • Determinate circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
  • Indeterminate circular indicators grow and shrink in size while moving along the invisible track.

Circular Progress Indicator

Circular progress indicator example

CircularProgressIndicator

The following shows an determinate circular progress indicator

Theming progress indicators

LinearProgressIndicator

CircularProgressIndicator

The following shows an indeterminate linear progress indicator and a determinate circular progress indicator with Shrine theming:

Circular Progress Indicator

No Flutter implementation guidance available

Using progress indicators

Material Design's progress indicator component is spread across two distinct components in the Material iOS library. There are linear progress indicators, which are implemented by the ProgressView component, and circular progress indicators, which are implemented by the ActivityIndicator component.

Progress indicators inform users about the status of 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.

Note: When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity.

Installing

Installation steps for progress indicators depend on whether you want to use the linear or circular progress indicator.

Installing linear progress indicators

To use linear progress indicators in your app, first add the ProgressView subspec to your Podfile:

Then, run the following command:

From there, import the relevant target or file.

Swift

Objective-C

Installing circular progress indicators

To use circular progress indicators in your app, first add the ActivityIndicator subspec to your Podfile:

Then, run the following command:

From there, import the relevant target or file.

Swift

Objective-C

Making progress indicators accessible

Neither of the two progress indicators require additional setup for accessibility. They are accessible by default.

Types

As mentioned above, Material Design offers two visually distinct types of progress indicators:

  1. Linear
  2. Circular

Only one type should represent each kind of activity in an app. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the app.

Composite image of both progress indicator types

Linear progress indicator

Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.

Linear progress indicators support both determinate and indeterminate operations.

  • Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.
  • Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.

Linear progress indicator examples

MDCProgressView GitHub source.

Determinate linear progress indicator example

A determinate linear progress indicator at 75%

To generate a determinate linear progress view like the one above, do the following:

Swift

Objective-C

Indeterminate linear progress indicator example

An indeterminate linear progress indicator.

To generate an indeterminate linear progress view like the one above, set the mode property.

Swift

Objective-C

Anatomy and key properties

A linear progress indicator consists of the following:

  1. Track
  2. Indicator

Linear indicator attributes

 AttributeRelated method(s)Default value
ColorprogressTintColor-setProgressTintColor:]
-progressTintColor]
Blue 500

Linear track attributes

 AttributeRelated method(s)Default value
ColortrackTintColor-setTrackTintColor:]
-trackTintColor]
progressTintColor at 0.3 saturation

Circular progress indicator

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

Circular progress indicators support both determinate and indeterminate processes.

  • Determinate circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
  • Indeterminate circular indicators grow and shrink in size while moving along the invisible track.

Circular progress indicator examples

MDCActivityIndicator GitHub source.

Determinate circular progress view example

A determinate circular progress indicator.

MDCActivityIndicator instances can be shown as determinate by modifying the indicatorMode property and setting a percentage progress with progress. progress must be set to a floating point number between 0 and 1. Values beyond this range will be capped within the range.

NOTE: Activity indicators are hidden unless they are animating, even if the indicator is determinate progress.

Swift

Objective-C

Indeterminate circular progress view example

An indeterminate circular progress indicator.

MDCActivityIndicator instances are indeterminate by default.

Swift

Objective-C

Theming

Theming is only available for linear progress indicators on iOS. The following is an example of an MDCProgressView with a Shrine theme:

Linear progress indicator with pink indicator and light pink track.

To theme an MDCProgressView with a theming extension and a container scheme, first add the following to your Podfile:

Then run the installer:

Then, import the relevant target or file and call the theming method.

Swift

Objective-C

No iOS implementation guidance available

Up next