GitHub New

Spinner

Previous Next

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

Processing payment...
$100.00
<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
    <div data-slot="item" data-variant="muted" data-size="default" class="group/item flex flex-wrap items-center gap-4 rounded-md border border-transparent bg-muted/50 p-4 text-sm">
        <div data-slot="item-media" class="flex shrink-0 items-center justify-center gap-2">
            <Spinner />
        </div>
        <div data-slot="item-content" class="flex flex-1 flex-col gap-1">
            <div data-slot="item-title" class="line-clamp-1 text-sm leading-snug font-medium">Processing payment...</div>
        </div>
        <div data-slot="item-content" class="flex flex-none flex-col justify-end gap-1">
            <span class="text-sm tabular-nums">$100.00</span>
        </div>
    </div>
</div>

Installation

blazor-shadcn add spinner

Usage

@using BlazorShadcn.Components.UI
<Spinner />

Customization

You can replace the default spinner icon with any other icon by editing the Spinner component.

<svg role="status"
     aria-label="Loading"
     class="size-4 animate-spin"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
     xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2v4"></path>
    <path d="m16.2 7.8 2.9-2.9"></path>
    <path d="M18 12h4"></path>
    <path d="m16.2 16.2 2.9 2.9"></path>
    <path d="M12 18v4"></path>
    <path d="m4.9 19.1 2.9-2.9"></path>
    <path d="M2 12h4"></path>
    <path d="m4.9 4.9 2.9 2.9"></path>
</svg>

Examples

Size

<div class="flex items-center gap-6">
    <Spinner Class="size-3" />
    <Spinner Class="size-4" />
    <Spinner Class="size-6" />
    <Spinner Class="size-8" />
</div>

Button

<div class="flex flex-col items-center gap-4">
    <Button Disabled="true" Size="ButtonSize.Sm">
        <Spinner />
        Loading...
    </Button>
    <Button Variant="ButtonVariant.Outline" Disabled="true" Size="ButtonSize.Sm">
        <Spinner />
        Please wait
    </Button>
    <Button Variant="ButtonVariant.Secondary" Disabled="true" Size="ButtonSize.Sm">
        <Spinner />
        Processing
    </Button>
</div>

Badge

Syncing Updating Processing 
<div class="flex items-center gap-4 [--radius:1.2rem]">
    <Badge>
        <Spinner />
        Syncing
    </Badge>
    <Badge Variant="BadgeVariant.Secondary">
        <Spinner />
        Updating
    </Badge>
    <Badge Variant="BadgeVariant.Outline">
        <Spinner />
        Processing
    </Badge>
</div>

Input GroupComing soon

Coming Soon

EmptyComing soon

Coming Soon