InsanusMokrassar/MicroUtils
1
0
Fork 0
mirror of https://github.com/InsanusMokrassar/MicroUtils.git synced 2025-02-16 19:52:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve SkeletonAnimation

Browse Source
This commit is contained in:
InsanusMokrassar 2022-09-13 22:01:02 +06:00
parent 1973e0b5bf
commit 422b2e6db1
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
common/compose/src/jsMain/kotlin/dev/inmo/micro_utils/common/compose/SkeletonAnimation.kt
View File

@ -7,12 +7,14 @@ object SkeletonAnimation : StyleSheet() {
to { backgroundPosition("-20% 0") } to { backgroundPosition("-20% 0") }
} }
fun CSSBuilder.createSkeletonStyle( fun CSSBuilder.includeSkeletonStyle(
duration: CSSSizeValue<out CSSUnitTime> = 2.s, duration: CSSSizeValue<out CSSUnitTime> = 2.s,
timingFunction: AnimationTimingFunction = AnimationTimingFunction.EaseInOut, timingFunction: AnimationTimingFunction = AnimationTimingFunction.EaseInOut,
iterationCount: Int? = null, iterationCount: Int? = null,
direction: AnimationDirection = AnimationDirection.Normal, direction: AnimationDirection = AnimationDirection.Normal,
keyFrames: CSSNamedKeyframes = skeletonKeyFrames keyFrames: CSSNamedKeyframes = skeletonKeyFrames,
hideChildren: Boolean = true,
hideText: Boolean = hideChildren
) { ) {
backgroundImage("linear-gradient(110deg, rgb(236, 236, 236) 40%, rgb(245, 245, 245) 50%, rgb(236, 236, 236) 65%)") backgroundImage("linear-gradient(110deg, rgb(236, 236, 236) 40%, rgb(245, 245, 245) 50%, rgb(236, 236, 236) 65%)")
backgroundSize("200% 100%") backgroundSize("200% 100%")
@ -23,15 +25,19 @@ object SkeletonAnimation : StyleSheet() {
iterationCount(iterationCount) iterationCount(iterationCount)
direction(direction) direction(direction)
} }
property("color", "${Color.transparent} !important") if (hideText) {
property("color", "${Color.transparent} !important")
}
child(self, universal) style { if (hideChildren) {
property("visibility", "hidden") child(self, universal) style {
property("visibility", "hidden")
}
} }
} }
val skeleton by style { val skeleton by style {
createSkeletonStyle() includeSkeletonStyle()
} }
} }