Composable function for circular progress bar with gradience and animation in Jetpack Compose

circular-progress.kt

@Composable
fun CircularProgressBar(
    percentage: Float,
    radius: Dp = 80.dp,
    animationDuration: Int = 1000,
) {

    var animFinished by remember {
        mutableStateOf(false)
    }

    val current_percent = animateFloatAsState(
        targetValue = if (animFinished) percentage else 0f,
        animationSpec = tween(
            durationMillis = animationDuration,
        )
    )

    LaunchedEffect(key1 = true) {
        animFinished = true
    }

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.size(radius * 2) // diameter
    ) {

        Canvas(modifier = Modifier.size(radius * 2)) {
            drawArc(
                brush = Brush.linearGradient(
                    colors = listOf(
                        Color(0xFF1A3194),
                        Color(0xFF1D41C5),
                        Color(0xFF7F98FF)
                    )
                ),
                startAngle = -90f,
                sweepAngle = 360 * current_percent.value,
                useCenter = false,
                style = Stroke(
                    7.dp.toPx(),
                    cap = StrokeCap.Round,
                ),
            )
        }

    }
}