Loading repository data…
timoseyfarth / repository
Shimmer effect modifier and predefined skeleton loaders for Jetpack Compose and Kotlin Multiplatform
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A Jetpack Compose library providing a customizable shimmer effect modifier and predefined skeleton loaders for Jetpack Compose, and Kotlin Multiplatform (incl. Compose Multiplatform).
✨ Special about this library: Seamless Global Synchronization: Create a unified loading experience with zero effort. Shimmer effects are automatically coordinated across your entire screen, ensuring animations flow perfectly from left-to-right. Just apply the modifier—the library handles the timing for you.
Note: Watch the demo below to see global sync in action. Notice how elements on the right side of the screen wait for the shimmer "pulse" to reach them, creating a unified transition.
Add the dependency to your commonMain source set or module-level build.gradle.kts:
implementation("dev.seyfarth:compose-shimmer-skeleton:1.0.1")
libs.versions.tomlIf you use a version catalog, add the following to your gradle/libs.versions.toml file:
[versions]
composeShimmerSkeleton = "1.0.1"
[libraries]
compose-shimmer-skeleton = { module = "dev.seyfarth:compose-shimmer-skeleton", version.ref = "composeShimmerSkeleton" }
Then in your commonMain source set or module-level build.gradle.kts, you can use the dependency like this:
implementation(libs.compose.shimmer.skeleton)
The shimmer effect is accessible via the modifier.
Selected from shared topics, language and repository description—not editorial ratings.
sayedsyfuzzaman /
A customizable Jetpack Compose modifier that adds a shimmer effect to composables, commonly used as a placeholder to indicate loading content.
32/100 healthshimmerEffect@Composable
fun LoadingItem(isLoading: Boolean) {
Box(
modifier = Modifier
.size(128.dp)
.shimmerEffect(
visible = isLoading,
)
)
Box(
modifier = Modifier
.shimmerEffect(
visible = isLoading,
shape = CircleShape,
)
)
}
| Parameter | Description | Default Value |
|---|---|---|
visible | Controls whether the shimmer effect is shown. When false, the shimmer animation is disabled. | true |
shape | The shape of the shimmer effect (rounded corners, circle, etc.). | RoundedCornerShape(4.dp) |
baseColor | The base background color of the shimmer effect. | Color(0xFF2C2C2C) (Light mode) / Color(0xFFE0E0E0) (Dark Mode) |
highlightColor | The highlight color that sweeps across the base color. | Color(0xFF3A3A3A) (Light Mode) / Color(0xFFF5F5F5) (Dark Mode) |
durationMillis | Duration of one complete shimmer animation cycle in milliseconds. | 2300 |
widthOfShadowBrush | The width of the shimmer gradient brush. | 500.dp |
shimmerTravel | The distance the shimmer effect travels during animation. | 300.dp |
angle | The angle (in degrees) at which the shimmer sweeps across the component. | 30f |
Modifier.shimmerEffect().