Indicador de progresso
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Os indicadores de progresso são telas circulares que mostram a duração de um processo ou um tempo de espera não especificado.
Use indicadores de progresso para mostrar a proporção de conclusão de uma tarefa. Para mostrar o progresso, um indicador é animado ao longo de uma faixa circular em sentido horário.
É possível aplicar indicadores de progresso a componentes, como o botão de reprodução.
Anatomia
Use indicadores de progresso para mostrar a proporção de conclusão de uma tarefa. Para mostrar o progresso, um indicador é animado ao longo de uma faixa circular em sentido horário.
É possível aplicar indicadores de progresso a componentes, como o botão de reprodução.
Recomendações de design
Indicador de progresso com lacuna
Crie indicadores de progresso com uma lacuna para deixar espaço para informações importantes, como o horário. Para criar uma lacuna, altere startAngle e endAngle do indicador de progresso.
Indicador de progresso pequeno
Crie indicadores de progresso com uma lacuna para deixar espaço para informações importantes, como o horário. Crie uma lacuna alterando o ângulo inicial e final do indicador de progresso.
Indicador de progresso indeterminado
Ao usar o indicador de progresso para situações em que não há tempo definido, use um indicador de progresso com valor animado. Isso também pode ser chamado de ícone de carregamento. Use os ícones de carregamento com moderação, porque eles podem aumentar o tempo de espera percebido.
Uso
Layouts adaptáveis
Comportamento responsivo
A circunferência do indicador de progresso preenche proporcionalmente a largura e a altura da tela/elemento (para o botão), enquanto a largura do traço permanece a mesma em todos os pontos de interrupção.
O grau de diferença para a tela cheia permanece em 51°, mas a limpeza aumenta em dp com base no tamanho da tela.
A largura do círculo e os pontos inicial e final são personalizáveis.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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."]]
