CircularProgressIndicator with rounded corner in Compose

Question

I'm trying to round corners of CircularProgressIndicator using jetpack compose. But I don't see any member variables to do so. Following is the source code, but it doesn't take Stroke as a parameter. If it can then we'll be able to create our custom Stroke with a round cap.

@Composable
fun CircularProgressIndicator(
    /*@FloatRange(from = 0.0, to = 1.0)*/
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
) {
    val stroke = with(LocalDensity.current) {
        Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Butt)
    }
    Canvas(
        modifier
            .progressSemantics(progress)
            .size(CircularIndicatorDiameter)
            .focusable()
    ) {
        // Start at 12 O'clock
        val startAngle = 270f
        val sweep = progress * 360f
        drawDeterminateCircularIndicator(startAngle, sweep, color, stroke)
    }
}

Answer 1

Starting from M2 1.4.0-alpha04 and M3 1.1.0-alpha04 you can use the strokeCap parameter:

    CircularProgressIndicator(
        //...
        strokeCap  = StrokeCap.Round,
    )