Loadersanimated

Percent ring

A circular track with an animated arc and a percentage label centered.

64%

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

val t = rememberInfiniteTransition(label = "pct")
val sweep by t.animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(
        tween(2000, easing = FastOutSlowInEasing),
        RepeatMode.Reverse,
    ),
    label = "sweep",
)
val primary = MaterialTheme.colorScheme.primary
val track = MaterialTheme.colorScheme.surfaceVariant
Box(Modifier.size(56.dp), contentAlignment = Alignment.Center) {
    Canvas(Modifier.fillMaxSize()) {
        val stroke = Stroke(width = 5.dp.toPx(), cap = StrokeCap.Round)
        drawArc(track, 0f, 360f, false, style = stroke)
        drawArc(primary, -90f, sweep, false, style = stroke)
    }
    Text(
        "${(sweep / 3.6f).toInt()}%",
        style = MaterialTheme.typography.labelMedium,
        color = primary,
    )
}