Iconsanimated

Battery charging

A battery that fills up with a charging bolt punched through it.

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 ChargingBattery() {
    val level by rememberInfiniteTransition(label = "batt").animateFloat(
        0f, 1f, infiniteRepeatable(tween(2000, easing = EaseInOut), RepeatMode.Restart), label = "lvl",
    )
    val color = MaterialTheme.colorScheme.primary
    Canvas(Modifier.size(40.dp)) {
        val body = Rect(8.dp.toPx(), 12.dp.toPx(), 32.dp.toPx(), 28.dp.toPx())
        drawRoundRect(color, body.topLeft, body.size, CornerRadius(4.dp.toPx()), style = Stroke(2.5.dp.toPx()))
        drawRoundRect(color, Offset(body.right, body.center.y - 3.dp.toPx()), Size(2.5.dp.toPx(), 6.dp.toPx()), CornerRadius(1.dp.toPx()))
        clipRect(body.left, body.bottom - body.height * level, body.right, body.bottom) {
            drawRect(color.copy(alpha = 0.3f), body.topLeft, body.size)
        }
        // Bolt
        drawPath(boltPath(body), color)
    }
}