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.

PropTypeDefault
sizeResponsive<1..3>2
loadingbooltrue

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

See Also