Badgesanimated

Battery charge

A status chip with a battery that fills and a bolt marking it charging.

Charging

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 = "charge")
val fill by t.animateFloat(
    initialValue = 0.15f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(tween(2000), RepeatMode.Restart),
    label = "fill",
)
val green = Color(0xFF22C55E)
Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(6.dp),
) {
    Box(contentAlignment = Alignment.CenterStart) {
        Canvas(Modifier.size(width = 26.dp, height = 13.dp)) {
            val r = 3.dp.toPx()
            drawRoundRect(
                color = green.copy(alpha = 0.35f),
                cornerRadius = CornerRadius(r, r),
                style = Stroke(1.5.dp.toPx()),
            )
            val pad = 2.5.dp.toPx()
            drawRoundRect(
                color = green,
                topLeft = Offset(pad, pad),
                size = Size((size.width - pad * 2) * fill, size.height - pad * 2),
                cornerRadius = CornerRadius(r / 2, r / 2),
            )
        }
        Icon(Icons.Filled.Bolt, null, Modifier.size(10.dp), tint = Color.White)
    }
    Text("Charging", color = green, fontSize = 12.sp, fontWeight = FontWeight.Medium)
}