Chartsanimated

Progress donut

A donut gauge whose colored arc sweeps to its value over a neutral track.

72%

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 ProgressDonut(
    target: Float = 0.72f,
    accent: Color = Color(0xFF10B981),
    modifier: Modifier = Modifier,
) {
    val sweep by animateFloatAsState(
        targetValue = target,
        animationSpec = tween(1100, easing = EaseOutCubic),
        label = "sweep",
    )
    val track = MaterialTheme.colorScheme.surfaceVariant
    Box(modifier.size(128.dp), contentAlignment = Alignment.Center) {
        Canvas(Modifier.fillMaxSize()) {
            val stroke = Stroke(12.dp.toPx(), cap = StrokeCap.Round)
            drawArc(track, 0f, 360f, false, style = stroke)
            drawArc(accent, -90f, 360f * sweep, false, style = stroke)
        }
        Text(
            text = "${(sweep * 100).toInt()}%",
            style = MaterialTheme.typography.titleLarge,
            fontWeight = FontWeight.SemiBold,
        )
    }
}