ProgressArc.kt

/**
 * Like a progress indicator, but drawn as an arc.
 *
 * @param progress The progress to indicate, or how much of the arc should be shaded, as a percentage
 * @param color The color of the arc
 * @param width The width of the stroke used to draw the arc
 */
@Composable
fun ProgressArc(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    width: Dp = 8.dp
) {
    val transition = animateFloatAsState(targetValue = progress, animationSpec = tween())
    Canvas(modifier = modifier) {
        val offset = Offset(width.toPx() / 2, width.toPx() / 2)
        val stroke = Stroke(width.toPx(), cap = StrokeCap.Square)
        val size = Size(this.size.width - width.toPx(), this.size.height - width.toPx())
        drawArc(
            color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity),
            startAngle = 135f,
            sweepAngle = 270f,
            useCenter = false,
            style = stroke,
            topLeft = offset,
            size = size
        )
        drawArc(
            color,
            startAngle = 135f,
            sweepAngle = 270f * transition.value,
            useCenter = false,
            style = stroke,
            topLeft = offset,
            size = size
        )
    }
}