Flowbite Blazor

Spinner Examples

The Spinner component provides a versatile loading indicator with customizable colors, sizes, and alignment options to enhance user experience during asynchronous operations.

Default Spinner #

Use the default spinner element with an aria-label for screen reader accessibility.


<Spinner aria-label="Default spinner example" />

Spinner Colors #

Choose from different spinner colors to match your design needs or indicate different states.


<div class="flex flex-wrap items-center gap-4">
    <Spinner Color="SpinnerColor.Info" aria-label="Info spinner example" />
    <Spinner Color="SpinnerColor.Success" aria-label="Success spinner example" />
    <Spinner Color="SpinnerColor.Warning" aria-label="Warning spinner example" />
    <Spinner Color="SpinnerColor.Failure" aria-label="Failure spinner example" />
    <Spinner Color="SpinnerColor.Pink" aria-label="Pink spinner example" />
    <Spinner Color="SpinnerColor.Purple" aria-label="Purple spinner example" />
    <Spinner Color="SpinnerColor.Gray" aria-label="Gray spinner example" />
</div>

Sizing Options #

Adjust spinner size from extra small to extra large to fit different design contexts.


<div class="flex items-center gap-4">
    <Spinner Size="SpinnerSize.Xs" aria-label="Extra small spinner" />
    <Spinner Size="SpinnerSize.Sm" aria-label="Small spinner" />
    <Spinner Size="SpinnerSize.Md" aria-label="Medium spinner" />
    <Spinner Size="SpinnerSize.Lg" aria-label="Large spinner" />
    <Spinner Size="SpinnerSize.Xl" aria-label="Extra large spinner" />
</div>

Alignment #

Position spinners within a container using flexbox utility classes.


<div class="flex flex-col gap-4">
    <div class="flex justify-start w-full">
        <Spinner aria-label="Left aligned spinner" />
    </div>
    <div class="flex justify-center w-full">
        <Spinner aria-label="Center aligned spinner" />
    </div>
    <div class="flex justify-end w-full">
        <Spinner aria-label="Right aligned spinner" />
    </div>
</div>

Loading Buttons #

Integrate spinners into buttons to indicate loading states during form submissions or data processing.


<div class="flex flex-wrap items-center gap-4">
    <Button>
        <Spinner Size="SpinnerSize.Sm" class="mr-3" aria-label="Button loading" />
        Loading...
    </Button>
    <Button Color="ButtonColor.Gray" Disabled>
        <Spinner Size="SpinnerSize.Sm" class="mr-3" aria-label="Gray button loading" />
        Processing...
    </Button>
</div>