The CircularProgressIndicator
component is a circular
display of the length of a process or an otherwise unspecified wait time.
Anatomy
Design recommendations
Create a progress indicator with a gap, as shown in the following example:
CircularProgressIndicator(
progress = 0.4f,
modifier = Modifier.fillMaxSize(),
startAngle = 290f,
endAngle = 250f,
strokeWidth = 4.dp
)
You can create a small progress indicator, as shown in the following example:
CircularProgressIndicator(
progress = 0.75f,
modifier = Modifier.fillMaxSize(),
startAngle = 0f,
indicatorColor = MaterialTheme.colors.secondary,
trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
strokeWidth = 4.dp
)
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.