{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ProgressIndicatorKt

public final class ProgressIndicatorKt


Summary

Public methods

static final void
@Composable
CircularProgressIndicator(
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Dp strokeWidth,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Indeterminate Material Design circular progress indicator.

static final void
@Composable
CircularProgressIndicator(
    float progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Dp strokeWidth,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

This method is deprecated. Use the overload that takes `progress` as a lambda

static final void
@Composable
CircularProgressIndicator(
    @NonNull Function0<@NonNull Float> progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Dp strokeWidth,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Determinate Material Design circular progress indicator.

static final void
@Composable
LinearProgressIndicator(
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Indeterminate Material Design linear progress indicator.

static final void
@Composable
LinearProgressIndicator(
    float progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

This method is deprecated. Use the overload that takes `progress` as a lambda

static final void
@Composable
LinearProgressIndicator(
    @NonNull Function0<@NonNull Float> progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Determinate Material Design linear progress indicator.

Public methods

CircularProgressIndicator

@Composable
public static final void CircularProgressIndicator(
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Dp strokeWidth,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Indeterminate Material Design circular progress indicator.

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

Circular progress indicator image

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.ui.Alignment

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    CircularProgressIndicator()
}
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this progress indicator

@NonNull Color color

color of this progress indicator

@NonNull Dp strokeWidth

stroke width of this progress indicator

@NonNull Color trackColor

color of the track behind the indicator, visible when the progress has not reached the area of the overall indicator yet

@NonNull StrokeCap strokeCap

stroke cap to use for the ends of this progress indicator

CircularProgressIndicator

@Composable
public static final void CircularProgressIndicator(
    float progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Dp strokeWidth,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

CircularProgressIndicator

@Composable
public static final void CircularProgressIndicator(
    @NonNull Function0<@NonNull Float> progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Dp strokeWidth,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Determinate Material Design circular progress indicator.

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

Circular progress indicator image

By default there is no animation between progress values. You can use ProgressIndicatorDefaults.ProgressAnimationSpec as the default recommended AnimationSpec when animating progress, such as in the following example:

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Slider
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ProgressIndicatorDefaults
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.unit.dp

var progress by remember { mutableStateOf(0.1f) }
val animatedProgress by animateFloatAsState(
    targetValue = progress,
    animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
)

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    CircularProgressIndicator(progress = { animatedProgress })
    Spacer(Modifier.requiredHeight(30.dp))
    Slider(
        modifier = Modifier
            .padding(start = 24.dp, end = 24.dp)
            .semantics {
                val progressPercent = (progress * 100).toInt()
                if (progressPercent in progressBreakpoints) {
                    stateDescription = "Progress $progressPercent%"
                }
            },
        value = progress,
        valueRange = 0f..1f,
        steps = 100,
        onValueChange = {
            progress = it
        })
}
Parameters
@NonNull Function0<@NonNull Float> progress

the progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range.

@NonNull Modifier modifier

the Modifier to be applied to this progress indicator

@NonNull Color color

color of this progress indicator

@NonNull Dp strokeWidth

stroke width of this progress indicator

@NonNull Color trackColor

color of the track behind the indicator, visible when the progress has not reached the area of the overall indicator yet

@NonNull StrokeCap strokeCap

stroke cap to use for the ends of this progress indicator

LinearProgressIndicator

@Composable
public static final void LinearProgressIndicator(
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Indeterminate Material Design linear progress indicator.

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

Linear progress indicator image

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.ui.Alignment

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    LinearProgressIndicator()
}
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this progress indicator

@NonNull Color color

color of this progress indicator

@NonNull Color trackColor

color of the track behind the indicator, visible when the progress has not reached the area of the overall indicator yet

@NonNull StrokeCap strokeCap

stroke cap to use for the ends of this progress indicator

LinearProgressIndicator

@Composable
public static final void LinearProgressIndicator(
    float progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

LinearProgressIndicator

@Composable
public static final void LinearProgressIndicator(
    @NonNull Function0<@NonNull Float> progress,
    @NonNull Modifier modifier,
    @NonNull Color color,
    @NonNull Color trackColor,
    @NonNull StrokeCap strokeCap
)

Determinate Material Design linear progress indicator.

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

Linear progress indicator image

By default there is no animation between progress values. You can use ProgressIndicatorDefaults.ProgressAnimationSpec as the default recommended AnimationSpec when animating progress, such as in the following example:

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Slider
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.ProgressIndicatorDefaults
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.unit.dp

var progress by remember { mutableStateOf(0.1f) }
val animatedProgress by animateFloatAsState(
    targetValue = progress,
    animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
)

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    LinearProgressIndicator(
        progress = { animatedProgress },
    )
    Spacer(Modifier.requiredHeight(30.dp))
    Slider(
        modifier = Modifier
            .padding(start = 24.dp, end = 24.dp)
            .semantics {
                val progressPercent = (progress * 100).toInt()
                if (progressPercent in progressBreakpoints) {
                    stateDescription = "Progress $progressPercent%"
                }
            },
        value = progress,
        valueRange = 0f..1f,
        steps = 100,
        onValueChange = {
            progress = it
        })
}
Parameters
@NonNull Function0<@NonNull Float> progress

the progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range.

@NonNull Modifier modifier

the Modifier to be applied to this progress indicator

@NonNull Color color

color of this progress indicator

@NonNull Color trackColor

color of the track behind the indicator, visible when the progress has not reached the area of the overall indicator yet

@NonNull StrokeCap strokeCap

stroke cap to use for the ends of this progress indicator