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