Skip to content

lomidzegaga/Circular-Progress-Indicator

Repository files navigation

🚀 Jetpack Compose Circular Progress Indicator

This project demonstrates a custom Circular Progress Indicator built with Jetpack Compose. It showcases two animation modes:

  • Immediate Start - The animation begins as soon as the composable is loaded.
  • Button-Controlled Start - The animation starts only when the user presses a button.

🎥 Demo

🔹 Auto-Start Animation

AutoStart.mov

🔹 Button-Controlled Animation

ButtonStart.mov

📌 Features

✅ Customizable duration (seconds, minutes, hours, days)
✅ Adjustable stroke width, colors, and radius
✅ Supports immediate and delayed animation start

🛠️ Usage

// Auto-start animation
CircularProgressIndicator()

// Button-controlled animation
val isAnimationStart = remember { mutableStateOf(false) }

Button(onClick = { isAnimationStart.toggle() }) {
   Text("Start/Stop Animation")
}

// Simple Extension for change isAnimationStart value
fun MutableState<Boolean>.toggle() {
   value = !value
}

CircularProgressIndicator(startAnimation = isAnimationStart)

About

Circular Progress Indicator

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages