Spinner
Displays an animated loading indicator.
use radix_yew_themes::Spinner;
use yew::prelude::*;
#[function_component]
pub fn SpinnerExample() -> Html {
html! {
<Spinner />
}
}
API Reference
This component is based on the span
element and supports common margin props.
Prop | Type | Default |
---|---|---|
size | Responsive<1..3> | 2 |
loading | bool | true |
Examples
Size
Use the size
prop to control the size of the spinner.
use radix_yew_themes::{Flex, FlexAlign, Spinner};
use yew::prelude::*;
#[function_component]
pub fn SpinnerSizeExample() -> Html {
html! {
<Flex align={FlexAlign::Center} gap=4>
<Spinner size=1 />
<Spinner size=2 />
<Spinner size=3 />
</Flex>
}
}
With Children
Use the ยง prop to control whether the spinner or its children are displayed. Spinner preserves the dimensions of children when they are hidden and disables interactive elements.
use radix_yew_themes::{Flex, Spinner, Switch};
use yew::prelude::*;
#[function_component]
pub fn SpinnerWithChildrenExample() -> Html {
html! {
<Flex gap=4>
<Spinner loading={true}>
<Switch default_checked=true />
</Spinner>
<Spinner loading={false}>
<Switch default_checked=true />
</Spinner>
</Flex>
}
}
With Buttons
Buttons have their own loading
prop that automatically composes a spinner.
use radix_yew_themes::Button;
use yew::prelude::*;
#[function_component]
pub fn SpinnerWithButtonsExample() -> Html {
html! {
<Button loading=true>{"Bookmark"}</Button>
}
}
If you have an icon inside the button, you can use the button's disabled
state and wrap the icon in a standalone <Spinner>
to achieve a more sophisticated design.
use radix_yew_icons::BookmarkIcon;
use radix_yew_themes::{Button, Spinner};
use yew::prelude::*;
#[function_component]
pub fn SpinnerWithButtonsDisabledExample() -> Html {
html! {
<Button disabled=true>
<Spinner loading=true>
<BookmarkIcon />
</Spinner>
{"Bookmark"}
</Button>
}
}