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>
}
}