Circular Progress Bar in Compose

To create a Circular Progress Bar in Compose we just have to use CircularProgressIndicator below is the code breakdown

@Composable
fun CenteredLoadingIndicator() {
    // Use a Column to center the content both vertically and horizontally
    Box(
        modifier = Modifier.fillMaxSize(), // Makes the container fill the screen
        contentAlignment = Alignment.Center // Centers content inside the Box
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceAround,
            verticalAlignment = Alignment.CenterVertically
        ) {
            CircularProgressIndicator(
                modifier = Modifier
                    .size(50.dp) // Size of the circular progress
                    .padding(16.dp), // Padding around the circular progress
                strokeWidth = 4.dp // Thickness of the circular progress line
            )
            Text(text = "Loading...")
        }
    }
}

You just have to simply call it where to use it.