InsanusMokrassar
/
MicroUtils
mirror of https://github.com/InsanusMokrassar/MicroUtils.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve SkeletonAnimation

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") }
}
fun CSSBuilder.createSkeletonStyle(
fun CSSBuilder.includeSkeletonStyle(
duration: CSSSizeValue<out CSSUnitTime> = 2.s,
timingFunction: AnimationTimingFunction = AnimationTimingFunction.EaseInOut,
iterationCount: Int? = null,
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%)")
backgroundSize("200% 100%")
@ -23,15 +25,19 @@ object SkeletonAnimation : StyleSheet() {
iterationCount(iterationCount)
direction(direction)
}
property("color", "${Color.transparent} !important")
if (hideText) {
property("color", "${Color.transparent} !important")
}
child(self, universal) style {
property("visibility", "hidden")
if (hideChildren) {
child(self, universal) style {
property("visibility", "hidden")
}
}
}
val skeleton by style {
createSkeletonStyle()
includeSkeletonStyle()
}
}