Spinner

Rust/UI Icons - ChevronLeftRust/UI Icons - ChevronRight

A loading spinner component with animation for indicating processing states.

animationutils
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

Loading spinner integrated within button components for async action feedback. This example demonstrates how to combine Spinner and Button in Leptos to create accessible loading states with proper ARIA attributes and visual indicators in Rust applications.

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

Get notified when new stuff drops.

Rust/UI Icons - Send
Rust/UI Icons - ChevronLeftSonnerStatusRust/UI Icons - ChevronRight