Badgesanimated

Progress ring

An upload chip with a sweeping arc that tracks completion around the percent.

Uploading 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

var progress by remember { mutableFloatStateOf(0f) }
val p by animateFloatAsState(
    targetValue = progress,
    animationSpec = tween(1400, easing = EaseInOutCubic),
    label = "p",
)
LaunchedEffect(Unit) { progress = 0.72f }
val sky = Color(0xFF0EA5E9)
Surface(
    shape = RoundedCornerShape(50),
    color = MaterialTheme.colorScheme.surfaceVariant,
    contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
) {
    Row(
        Modifier.padding(start = 6.dp, end = 12.dp, top = 4.dp, bottom = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(6.dp),
    ) {
        Box(Modifier.size(18.dp), contentAlignment = Alignment.Center) {
            Canvas(Modifier.fillMaxSize()) {
                val s = Stroke(2.5.dp.toPx(), cap = StrokeCap.Round)
                drawArc(sky.copy(alpha = 0.2f), 0f, 360f, false, style = s)
                drawArc(sky, -90f, 360f * p, false, style = s)
            }
            Icon(Icons.Filled.ArrowUpward, null, Modifier.size(9.dp), tint = sky)
        }
        Text("Uploading 72%", fontSize = 12.sp)
    }
}