Indicador de progreso

El componente CircularProgressIndicator es una pantalla circular de la duración de un proceso o un tiempo de espera no especificado.

Usa indicadores de progreso para mostrar la proporción de una tarea que ya se completó. Para mostrar el progreso, se anima un indicador a lo largo de un recorrido circular en el sentido de las manecillas del reloj.

Puedes aplicar indicadores de progreso a los componentes, como un botón de reproducción.

Anatomía

A. Seguimiento
B. Progreso de la pista

Recomendaciones de diseño

Indicador de progreso con intervalo

Crea indicadores de progreso con un espacio a fin de que haya lugar para información importante, como la hora. Crea un espacio cambiando el startAngle y endAngle del indicador de progreso.

Crea un indicador de progreso con un intervalo, como se muestra en el siguiente ejemplo:

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

Indicador de progreso pequeño

Aplica el pequeño indicador de progreso de forma directa a un botón cuando el progreso indicado esté directamente relacionado con la acción que el botón representa y cuando el espacio de pantalla sea limitado.

Puedes crear un pequeño indicador de progreso, como se muestra en el siguiente ejemplo:

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

Indicador de progreso indeterminado

Cuando uses el indicador de progreso para situaciones en las que no haya un tiempo establecido, usa un indicador de progreso con valor animado. También puede denominarse ícono giratorio. Usa los íconos giratorios con moderación, ya que pueden aumentar el tiempo de espera percibido.

Puedes crear un indicador de progreso indeterminado según se muestra en el siguiente ejemplo:

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

Uso

Consulta los siguientes ejemplos de indicadores de progreso.