Cardsanimated

Download Progress

A download card whose progress bar fills as bytes arrive.

<Card className="w-64 mx-auto"> <CardContent className="flex flex-col gap-2 p-4"> <div className="flex items-center gap-2"> <Download className="size-4 text-foreground" /> <span className="text-sm text-foreground">report.pdf</span> <span className="ml-auto text-xs text-muted-foreground">64%</span> </div> <div className="h-2 w-full rounded-full bg-muted overflow-hidden"> <div className="h-full w-[64%] rounded-full bg-primary transition-all duration-700" /> </div> </CardContent> </Card>

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 DownloadProgress(target: Float) {
    val progress by animateFloatAsState(
        targetValue = target,
        animationSpec = tween(700),
        label = "dl"
    )
    Card(
        shape = RoundedCornerShape(14.dp),
        modifier = Modifier.padding(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(10.dp)
            ) {
                Icon(Icons.Rounded.Download, contentDescription = null)
                Text("report.pdf")
                Spacer(Modifier.weight(1f))
                Text("${'$'}{(progress * 100).toInt()}%")
            }
            LinearProgressIndicator(
                progress = { progress },
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}