
Customizable animated loading components for Compose UIs — stylish effects like DotSpinner, BarsWave and SonarWave, configurable colors, sizes and durations for effortless loading states.
KLoading is a Compose Multiplatform library offering a collection of beautiful and customizable loading animations. Easily implement loading states across Android, iOS, Desktop, and Web.
To integrate KLoading into your Compose Multiplatform project, you need to add the library as a dependency in your build.gradle.kts file (typically located in the common source set).
In your common module's build.gradle.kts:
commonMain.dependencies {
// Other dependencies...
implementation("io.github.rhobus:KLoading:${latest_version}")
}Ensure your project has access to the Maven Central repository where the library is hosted. This is usually configured in the top-level or project-level settings.gradle.kts or build.gradle.kts.
KLoading currently offers a variety of compelling animations. Each one is a @Composable function that can be customized with parameters like color, size, and animation duration.
| BarsWave | BricksAnimation | DotSpinner |
|---|---|---|
![]() |
![]() |
![]() |
| RotatingBricks | RotatingSquare | SonarWave |
![]() |
![]() |
![]() |
| ThreeDotsWave | WatchRunning Animation |
WatchTicking Animation |
![]() |
![]() |
![]() |
All animations are regular Composable functions. Simply call them in your UI code!
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import io.github.rhobus.kloading.animation.DotSpinner
@Composable
fun LoadingScreen() {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.primary // Use a contrasting background
) {
DotSpinner(
color = Color.Yellow,
dotSize = 10.dp,
maxRadius = 30.dp
)
}
}All contributions from the community are welcome! If you have a cool, performant loading animation you'd like to share, please check out the CONTRIBUTING.md file for guidelines on how to submit your work. Help us make KLoading the best library for loading animations!
KLoading is licensed under the Apache License, Version 2.0. You are free to use, modify, and distribute this software, subject to the terms of the license.
KLoading is a Compose Multiplatform library offering a collection of beautiful and customizable loading animations. Easily implement loading states across Android, iOS, Desktop, and Web.
To integrate KLoading into your Compose Multiplatform project, you need to add the library as a dependency in your build.gradle.kts file (typically located in the common source set).
In your common module's build.gradle.kts:
commonMain.dependencies {
// Other dependencies...
implementation("io.github.rhobus:KLoading:${latest_version}")
}Ensure your project has access to the Maven Central repository where the library is hosted. This is usually configured in the top-level or project-level settings.gradle.kts or build.gradle.kts.
KLoading currently offers a variety of compelling animations. Each one is a @Composable function that can be customized with parameters like color, size, and animation duration.
| BarsWave | BricksAnimation | DotSpinner |
|---|---|---|
![]() |
![]() |
![]() |
| RotatingBricks | RotatingSquare | SonarWave |
![]() |
![]() |
![]() |
| ThreeDotsWave | WatchRunning Animation |
WatchTicking Animation |
![]() |
![]() |
![]() |
All animations are regular Composable functions. Simply call them in your UI code!
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import io.github.rhobus.kloading.animation.DotSpinner
@Composable
fun LoadingScreen() {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.primary // Use a contrasting background
) {
DotSpinner(
color = Color.Yellow,
dotSize = 10.dp,
maxRadius = 30.dp
)
}
}All contributions from the community are welcome! If you have a cool, performant loading animation you'd like to share, please check out the CONTRIBUTING.md file for guidelines on how to submit your work. Help us make KLoading the best library for loading animations!
KLoading is licensed under the Apache License, Version 2.0. You are free to use, modify, and distribute this software, subject to the terms of the license.