Iconsanimated

Success check

A success state that draws its ring and checkmark stroke-by-stroke on completion.

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 SuccessCheck(visible: Boolean, modifier = Modifier) {
    val p by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        animationSpec = tween(700, easing = EaseOutCubic),
        label = "check",
    )
    val color = MaterialTheme.colorScheme.primary
    Canvas(modifier.size(40.dp)) {
        val stroke = Stroke(width = 3.dp.toPx(), cap = StrokeCap.Round, join = StrokeJoin.Round)
        // Ring draws first (0..0.6), then the tick (0.4..1).
        drawArc(
            color = color,
            startAngle = -90f,
            sweepAngle = 360f * (p / 0.6f).coerceIn(0f, 1f),
            useCenter = false,
            style = stroke,
        )
        val tick = Path().apply {
            moveTo(size.width * 0.30f, size.height * 0.52f)
            lineTo(size.width * 0.45f, size.height * 0.67f)
            lineTo(size.width * 0.72f, size.height * 0.34f)
        }
        val measure = PathMeasure().apply { setPath(tick, false) }
        val tickP = ((p - 0.4f) / 0.6f).coerceIn(0f, 1f)
        drawPath(
            path = Path().also { measure.getSegment(0f, measure.length * tickP, it, true) },
            color = color,
            style = stroke,
        )
    }
}