Indicador de progreso
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Los indicadores de progreso son pantallas circulares que indican 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 está completa. Para mostrar el progreso, se anima un indicador a lo largo de una pista 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
Usa indicadores de progreso para mostrar la proporción de una tarea que está completa. Para mostrar el progreso, se anima un indicador a lo largo de una pista circular en el sentido de las manecillas del reloj.
Puedes aplicar indicadores de progreso a los componentes, como un botón de reproducción.
Recomendaciones de diseño
Indicador de progreso con intervalo
Crea indicadores de progreso con un espacio para guardar información importante, como la hora. Para crear un intervalo, cambia los valores startAngle y endAngle de los indicadores de progreso.
Indicador de progreso pequeño
Crea indicadores de progreso con un espacio para guardar información importante, como la hora. Para crear un déficit, cambia el ángulo inicial y final del indicador de progreso.
Indicador de progreso indeterminado
Cuando uses el indicador de progreso para situaciones en las que no hay un tiempo establecido, usa un indicador de progreso con valor animado. También se puede denominar ícono giratorio. Usa los íconos giratorios con moderación, ya que pueden aumentar el tiempo de espera percibido.
Uso
Diseños adaptables
Comportamiento responsivo
La circunferencia del indicador de progreso ocupa el ancho y la altura de la pantalla o el elemento (para el botón de activado) de manera proporcional, mientras que el ancho del trazo permanece igual en todos los puntos de interrupción.
El grado de separación para la pantalla completa se mantiene en 51°, pero el barrido aumentará en dp según el tamaño de la pantalla.
El ancho del anillo, así como los puntos de inicio y finalización, se pueden personalizar.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Progress indicator\n\n[Progress indicators](/reference/kotlin/androidx/wear/compose/material/package-summary#CircularProgressIndicator(kotlin.Float,androidx.compose.ui.Modifier,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp)) are circular displays of the length of a process or an otherwise unspecified wait time. \nUse 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. \n\nYou can apply progress indicators to components such as a play button.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nAnatomy\n-------\n\nUse 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. \n\nYou can apply progress indicators to components such as a play button.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Design recommendations**\n--------------------------\n\n**Progress indicator with gap**\n\n\u003cbr /\u003e\n\n\nCreate 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.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Small progress indicator**\n\n\u003cbr /\u003e\n\n\nCreate progress indicators with a gap to leave space for important information such as the time. Create a gap by changing the progress indicator's start and end angle.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Indeterminate progress indicator**\n\n\u003cbr /\u003e\n\n\nWhen 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 perceived wait time.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\nResponsive behavior\n-------------------\n\nThe circumference of the progress indicator fills the screen/element (for on button) width and height, proportionally, while the stroke width remains the same across all breakpoints. \n\n\nThe gap degree for full screen stays at 51°, but the sweep will increase in dp based on the screen size. \n\nThe ring width and starting and end points are customisable."]]
