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.
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.
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.
As more information about a process becomes available, a progress indicator can switch from an indeterminate to a determinate state.
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.
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
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.
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.
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.
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.
Progress indicators are available in the Material library for Jetpack Compose. Visit the library reference documentation on Android Developers to get started.
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
A determinate progress indicator can added in a layout like so:
Indeterminate progress indicators can smoothly transit to determinate progress
indicators by setting the progress programmatically:
xxxxxxxxxx
intprogress=getLoadingProgress()
indicator.setProgressCompat(progress, true)
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:
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
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.
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.
For linear progress indicator, there are two indeterminate animation types:
disjoint - animates as repeated cycles with two disjoint segments in the
same color at a time.
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.
MDC Progress Indicator Foundation exposes the following methods:
Method Signature
Description
setDeterminate(value: boolean) => void
Toggles the component between the determinate and indeterminate state.
isDeterminate() => boolean
Whether or not the component is in determinate state.
setProgress(value: number) => void
Sets the progress to this value. Value should be between [0, 1].
getProgress() => number
The current progress value in the interval [0,1].
open() => void
Puts the component in the open state.
close() => void
Puts the component in the closed state.
isClosed() => boolean
Whether or not the progress indicator is closed.
MDCProgressIndicator Component API
MDC Progress Indicator exposes the following API:
Method Signature
Description
determinate: boolean
Whether the indicator is in the determinate or indeterminate state.
progress: number
The current progress. Value should be between [0, 1].
open() => void
Puts the component in the open state.
close() => void
Puts 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.
Flutter implements these as subtypes of the ProgressIndicator class.
Anatomy and key properties
The following is an anatomy diagram of a linear progress indicator:
A linear progress indicator consists of the following:
Track
Indicator
Linear track
The track is a fixed width rule, with set boundaries for the indicator to travel along.
Property
Color
backgroundColor
Linear indicator
The indicator animates along the length of the track.
Property
Color
valueColor 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.
The following example shows an indeterminate linear progress indicator:
xxxxxxxxxx
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.
The following shows an indeterminate linear progress indicator and a determinate circular progress indicator with Shrine theming:
xxxxxxxxxx
No Flutter implementation guidance available
On July 15, 2021, Material's iOS libraries will enter maintenance mode. Learn more.
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:
xxxxxxxxxx
Then, run the following command:
xxxxxxxxxx
From there, import the relevant target or file.
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Installing circular progress indicators
To use circular progress indicators in your app, first add the ActivityIndicator subspec to your Podfile:
xxxxxxxxxx
Then, run the following command:
xxxxxxxxxx
From there, import the relevant target or file.
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
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:
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.
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.
To generate a determinate linear progress view like the one above, do the following:
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Indeterminate linear progress indicator example
To generate an indeterminate linear progress view like the one above, set the mode property.
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Anatomy and key properties
A linear progress indicator consists of the following:
Track
Indicator
Linear indicator attributes
Attribute
Related method(s)
Default value
Color
progressTintColor
-setProgressTintColor:] -progressTintColor]
Blue 500
Linear track attributes
Attribute
Related method(s)
Default value
Color
trackTintColor
-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.
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
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Indeterminate circular progress view example
MDCActivityIndicator instances are indeterminate by default.
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Theming
Theming is only available for linear progress indicators on iOS. The following is an example of an MDCProgressView with a Shrine theme:
To theme an MDCProgressView with a theming extension and a container scheme, first add the following to your Podfile:
xxxxxxxxxx
Then run the installer:
xxxxxxxxxx
Then, import the relevant target or file and call the theming method.