進度指標

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
)

使用方法

請參閱以下進度指標的範例。