How could I design a multi circular progress bar in jetpack compose?

Question

I'm trying to design a progress bar showing multi-progress using jetpack compose but I did not find any library or helping material. I am just able to design a single progress bar but I need to design like

.

Answer 1

Just use multiple CircularProgressIndicator inside a Box:

Box(contentAlignment = Alignment.Center) {
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))
    CircularProgressIndicator(
        progress = 0.55f,
        color = Green,
        modifier = Modifier.then(Modifier.size(80.dp)))
    CircularProgressIndicator(
        progress = 0.75f,
        color = Blue,
        modifier = Modifier.then(Modifier.size(100.dp)))
}

If you want to draw also the circular track starting from M2 1.4.0-alpha04 and M3 1.1.0-alpha04 you can use the trackColor parameter:

CircularProgressIndicator(
    //...
    trackColor = LightGray
)

Before that releases if you want to draw also the circular track you can build a custom Composable with a Canvas + CircularProgressIndicator.
Something like:

   val stroke = with(LocalDensity.current) {
    Stroke(width = ProgressIndicatorDefaults.StrokeWidth.toPx(), cap = StrokeCap.Butt)
   }

    Canvas(modifier = Modifier.size(60.dp)){
        val diameterOffset = stroke.width / 2
        drawCircle(
            radius = size.minDimension / 2.0f-diameterOffset,
            color= LightGray,style = stroke)
    }
    CircularProgressIndicator(
        progress = 0.45f,
        color = Red,
        modifier = Modifier.then(Modifier.size(60.dp)))