Круговой индикатор выполнения градиента в режиме создания реактивного ранца

Я не думаю, что возможно присвоить CircularProgressIndicator градиентный цвет, потому что на данный момент его параметр color принимает только тип Color, и я не вижу никакой перегрузки с типом Brush для его цвета.

Один из способов добиться желаемого — нарисовать кольцо с помощью Canvas, однако простого кольца недостаточно. С помощью некоторых настроек вы можете добиться этого:

@Composable
fun GradientProgress(
    modifier: Modifier = Modifier,
    diameter: Dp = 100.dp,
    width: Float = 10f,
    colors: List<Color> = listOf(Color.Cyan, Color.Blue),
    progress: Float = .75f
) {
    Box(
        content = {
            Text(
                text = "${(progress * 100).toInt()}",
                modifier = Modifier.align(Alignment.Center)
            )
            Canvas(
                modifier = modifier
                    .size(diameter)
                    .rotate(-90f)
                    .graphicsLayer {
                        rotationY = 360f
                    },
                onDraw = {
                    drawArc(
                        color = Color.LightGray,
                        startAngle = 0f,
                        sweepAngle = 360f,
                        false,
                        style = Stroke(width = width)
                    )
                    drawArc(
                        brush = Brush.sweepGradient(colors = colors),
                        startAngle = 0f,
                        sweepAngle = progress * 360f,
                        false,
                        style = Stroke(width = width)
                    )
                }
            )
        }
    )
}