Spinner

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

A loading spinner component with animation for indicating processing states.

animationutils
  • Rust/UI Icons - CopyCopy Demo
Rust/UI Icons - LoaderRust/UI Icons - LoaderCircle
use leptos::prelude::*;

use crate::components::ui::spinner::{Spinner, SpinnerCircle};

#[component]
pub fn DemoSpinner() -> impl IntoView {
    view! {
        <div class="flex gap-4">
            <Spinner />
            <SpinnerCircle />
        </div>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_spinner
ui add spinner

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/spinner.rs

use icons::{Loader, LoaderCircle};
use leptos::prelude::*;
use tw_merge::tw_merge;

#[component]
pub fn Spinner(#[prop(into, optional)] class: String) -> impl IntoView {
    let merged_class = tw_merge!("size-4 animate-spin", class);

    view! { <Loader class=merged_class attr:role="status" attr:aria-label="Loading" /> }
}

#[component]
pub fn SpinnerCircle(#[prop(into, optional)] class: String) -> impl IntoView {
    let merged_class = tw_merge!("size-4 animate-spin", class);

    view! { <LoaderCircle class=merged_class attr:role="status" attr:aria-label="Loading" /> }
}

Update the imports to match your project setup.

Usage

use crate::components::ui::spinner::Spinner;
<Spinner />

Examples

In Button

Show loading state in buttons.

  • Rust/UI Icons - CopyCopy Demo
use leptos::prelude::*;

use crate::components::ui::button::{Button, ButtonVariant};
use crate::components::ui::spinner::SpinnerCircle;

#[component]
pub fn DemoSpinnerButton() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-4 items-center">
            <Button attr:disabled=true>
                <SpinnerCircle />
                <span>"Loading..."</span>
            </Button>
            <Button variant=ButtonVariant::Outline attr:disabled=true>
                <SpinnerCircle />
                <span>"Please wait"</span>
            </Button>
            <Button variant=ButtonVariant::Secondary attr:disabled=true>
                <SpinnerCircle />
                <span>"Processing"</span>
            </Button>
        </div>
    }
}
Rust/UI Icons - ChevronLeftSonnerSwitchRust/UI Icons - ChevronRight