✨ Make Spinner animation suspendable
This commit is contained in:
@@ -23,14 +23,21 @@ impl IconShape for _Spinner {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[derive(PartialEq, Props)]
|
||||||
pub fn Spinner(cx: Scope) -> Element {
|
pub struct SpinnerProps {
|
||||||
|
#[props(default = true)]
|
||||||
|
animate: bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn Spinner(cx: Scope<SpinnerProps>) -> Element {
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
style { STYLE_SHEET },
|
style { STYLE_SHEET },
|
||||||
|
|
||||||
div {
|
div {
|
||||||
class: ClassName::ROOT,
|
class: ClassName::ROOT,
|
||||||
|
|
||||||
Icon {
|
Icon {
|
||||||
|
class: if cx.props.animate { "" } else { ClassName::PAUSED },
|
||||||
icon: _Spinner,
|
icon: _Spinner,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -35,5 +35,10 @@ $logo-aspect-ratio: calc($logo-width / $logo-height);
|
|||||||
fill: $color-ternary-100;
|
fill: $color-ternary-100;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.paused {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user