Progress indicator

The CircularProgressIndicator component is a circular display of the length of a process or an otherwise unspecified wait time.

Use progress indicators to show the proportion of a task that is complete. To show progress an indicator is animated along a circular track in a clockwise direction.

You can apply progress indicators to components such as a play button.

Anatomy

A. Track
B. Track progress

Design recommendations

Progress indicator with gap

Create progress indicators with a gap to leave space for important information such as the time. To create a gap, change the progress indicator’s startAngle and endAngle.

Create a progress indicator with a gap, as shown in the following example:

CircularProgressIndicator(
    progress = 0.4f,
    modifier = Modifier.fillMaxSize(),
    startAngle = 10f,
    endAngle = 290f,
    strokeWidth = 4.dp
)

Small progress indicator

Apply the small progress indicator directly to a button when the indicated progress is directly related to the action the button represents and when the screen space is limited.

You can create a small progress indicator, as shown in the following example:

CircularProgressIndicator(
    progress = 0.75,
    modifier = Modifier.fillMaxSize(),
    startAngle = 0,
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

Indeterminate progress indicator

When using the progress indicator for situations where there is no set time, use a progress indicator with animated value. This can also be called a spinner. Use spinners sparingly as they can increase pereceived wait time.

You can create an indeterminate progress indicator, as shown in the following example:

CircularProgressIndicator(
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

Usage

See the following examples of progress indicators.