Spinner

An indicator that can be used to show a loading state.

Processing payment...

$100.00

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerExample() -> impl IntoView {
    view! {
        <div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
            <Item variant="muted">
                <ItemMedia>
                    <Spinner />
                </ItemMedia>
                <ItemContent>
                    <ItemTitle class="line-clamp-1">"Processing payment..."</ItemTitle>
                </ItemContent>
                <ItemContent class="flex-none justify-end">
                    <span class="text-sm tabular-nums">"$100.00"</span>
                </ItemContent>
            </Item>
        </div>
    }
}

Customization

Spinner will override the default icon with any provided children.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerCustomExample() -> impl IntoView {
    view! { <Spinner>{icon!(icondata::LuLoader, class="size-6 text-red-500")}</Spinner> }
}

Size

Use the size-* utility class to change the size of the spinner.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerSizeExample() -> impl IntoView {
    view! {
        <div class="flex items-center gap-6">
            <Spinner class="size-3" />
            <Spinner class="size-4" />
            <Spinner class="size-6" />
            <Spinner class="size-8" />
        </div>
    }
}

Color

Use the text-* utility class to change the color of the spinner.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerColorExample() -> impl IntoView {
    view! {
        <div class="flex items-center gap-6">
            <Spinner class="size-6 text-red-500" />
            <Spinner class="size-6 text-green-500" />
            <Spinner class="size-6 text-blue-500" />
            <Spinner class="size-6 text-yellow-500" />
            <Spinner class="size-6 text-purple-500" />
        </div>
    }
}

Button

Add a spinner to a button to indicate a loading state. The Button will handle the spacing between the spinner and the text.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerButtonExample() -> impl IntoView {
    view! {
        <div class="flex flex-col items-center gap-4">
            <Button disabled=true size="sm">
                <Spinner />
                "Loading..."
            </Button>
            <Button variant="outline" disabled=true size="sm">
                <Spinner />
                "Please wait"
            </Button>
            <Button variant="secondary" disabled=true size="sm">
                <Spinner />
                "Processing"
            </Button>
        </div>
    }
}

Badge

You can also use a spinner inside a badge.

SyncingUpdatingProcessing

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerBadgeExample() -> impl IntoView {
    view! {
        <div class="flex items-center gap-4 [--radius:1.2rem]">
            <Badge>
                <Spinner />
                "Syncing"
            </Badge>
            <Badge variant="secondary">
                <Spinner />
                "Updating"
            </Badge>
            <Badge variant="outline">
                <Spinner />
                "Processing"
            </Badge>
        </div>
    }
}

Input Group

InputGroup can have spinners inside InputGroupAddon.

Validating...

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerInputGroupExample() -> impl IntoView {
    view! {
        <div class="flex w-full max-w-md flex-col gap-4">
            <InputGroup>
                <Input placeholder="Send a message..." disabled=true />
                <InputGroupAddon align="inline-end">
                    <Spinner />
                </InputGroupAddon>
            </InputGroup>
            <InputGroup>
                <Textarea placeholder="Send a message..." disabled=true />
                <InputGroupAddon align="block-end">
                    <Spinner />
                    "Validating..."
                    <Button class="ml-auto" variant="default">
                        {icon!(icondata::LuArrowUp)}
                        <span class="sr-only">"Send"</span>
                    </Button>
                </InputGroupAddon>
            </InputGroup>
        </div>
    }
}

Empty

Processing your request

Please wait while we process your request. Do not refresh the page.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerEmptyExample() -> impl IntoView {
    view! {
        <Empty class="w-full">
            <EmptyHeader>
                <EmptyMedia variant="icon">
                    <Spinner />
                </EmptyMedia>
                <EmptyTitle>"Processing your request"</EmptyTitle>
                <EmptyDescription>
                    "Please wait while we process your request. Do not refresh the page."
                </EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
                <Button variant="outline" size="sm">
                    "Cancel"
                </Button>
            </EmptyContent>
        </Empty>
    }
}

Item

Use the spinner inside ItemMedia to indicate a loading state.

Downloading...

129 MB / 1000 MB

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn SpinnerItemExample() -> impl IntoView {
    view! {
        <div class="flex w-full max-w-md flex-col gap-4 [--radius:1rem]">
            <Item variant="outline">
                <ItemMedia variant="icon">
                    <Spinner />
                </ItemMedia>
                <ItemContent>
                    <ItemTitle>"Downloading..."</ItemTitle>
                    <ItemDescription>"129 MB / 1000 MB"</ItemDescription>
                </ItemContent>
                <ItemActions>
                    <Button variant="outline" size="sm">
                        "Cancel"
                    </Button>
                </ItemActions>
                <ItemFooter>
                    <Progress max=1000 value=129 />
                </ItemFooter>
            </Item>
        </div>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::spinner::*;

#[component]
pub fn SpinnerAnatomy() -> impl IntoView {
    view! { <Spinner /> }
}

API Reference

Spinner

Displays a loading spinner.

Implements global attributes.