진행 상태 표시기

CircularProgressIndicator 구성요소는 프로세스 길이 또는 달리 지정되지 않은 대기 시간을 원형으로 표시합니다.

진행 상태 표시기를 사용하여 완료된 작업의 비율을 표시합니다. 진행 상태를 표시하기 위해 표시기는 시계 방향으로 원형 트랙을 따라 애니메이션 처리됩니다.

재생 버튼과 같은 구성요소에 진행 상태 표시기를 적용할 수 있습니다.

분석

A. 트랙
B. 트랙 진행 상태

디자인 권장사항

간격이 있는 진행 상태 표시기

시간 등의 중요한 정보를 위한 공간을 확보할 수 있도록 간격이 있는 진행 상태 표시기를 만드세요. 간격을 만들려면 진행 상태 표시기의 startAngle과 endAngle을 변경합니다.

다음 예와 같이 간격이 있는 진행 상태 표시기를 만듭니다.

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

작은 진행 상태 표시기

표시된 진행 상태가 버튼이 나타내는 작업과 직접 관련되고 화면 공간이 제한된 경우 작은 진행 상태 표시기를 버튼에 직접 적용합니다.

다음 예와 같이 작은 진행 상태 표시기를 만들 수 있습니다.

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

확실하지 않은 진행 상태 표시기

설정된 시간이 없는 상황에서 진행 상태 표시기를 사용할 때는 진행 상태 표시기를 애니메이션 값과 함께 사용하세요. 이를 스피너라고도 합니다. 스피너는 가끔 사용하세요. 인식된 대기 시간을 늘릴 수 있기 때문입니다.

다음 예와 같이 확실하지 않은 진행 상태 표시기를 만들 수 있습니다.

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

사용

진행 상태 표시기를 보여주는 다음 예를 참고하세요.