Feedbackanimated

Circular progress

A determinate ring that animates its sweep with the percentage centered.

69%

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun CircularPercent(progress: Float) {
    val animated by animateFloatAsState(progress, tween(800), label = "cp")
    Box(Modifier.size(72.dp), contentAlignment = Alignment.Center) {
        Canvas(Modifier.fillMaxSize()) {
            val stroke = 7.dp.toPx()
            drawArc(Color.LightGray.copy(alpha = 0.3f), 0f, 360f, false,
                style = Stroke(stroke))
            drawArc(Color(0xFF6366F1), -90f, 360f * animated, false,
                style = Stroke(stroke, cap = StrokeCap.Round))
        }
        Text("${(animated * 100).roundToInt()}%",
            style = MaterialTheme.typography.titleSmall, fontWeight = FontWeight.Bold)
    }
}