Spinner

Submitting Contact Form...

---
import { Item, ItemContent, ItemMedia, ItemTitle } from '@bejamas/ui/components/item';
import { Spinner } from '@bejamas/ui/components/spinner';
---

<Item variant="muted" class="w-full max-w-xs">
  <ItemMedia>
    <Spinner />
  </ItemMedia>
  <ItemContent>
    <ItemTitle class="line-clamp-1">Submitting Contact Form...</ItemTitle>
  </ItemContent>
</Item>

View CodeHide Code

Installation

bun

bunx bejamas add spinner

npm

npx bejamas add spinner

pnpm

pnpm dlx bejamas add spinner

yarn

yarn dlx bejamas add spinner

Usage

---
import { Spinner } from '@bejamas/ui/components/spinner';
---

<Spinner />

Customization

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

components/ui/spinner/Spinner.astro

---
import { cn } from "@/lib/utils";
import { Loader as LoaderIcon } from "@lucide/astro";

const { class: className = "", ...props } = Astro.props;
---

<LoaderIcon
  data-slot="spinner"
  role="status"
  aria-label="Loading"
  class={cn("size-4 animate-spin", className)}
  {...props}
/>

Examples

Size

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

---
import { Spinner } from '@bejamas/ui/components/spinner';
---

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

View CodeHide Code

Button

Add a spinner to a button to indicate a loading state. Remember to use the data-icon attribute for proper spacing.

Loading... Please wait Processing

---
import { Button } from '@bejamas/ui/components/button';
import { Spinner } from '@bejamas/ui/components/spinner';
---

<div class="flex flex-col items-center gap-4">
  <Button disabled size="sm">
    <Spinner data-icon />
    Loading...
  </Button>
  <Button variant="outline" disabled size="sm">
    <Spinner data-icon />
    Please wait
  </Button>
  <Button variant="secondary" disabled size="sm">
    <Spinner data-icon />
    Processing
  </Button>
</div>

View CodeHide Code

Badge

Add a spinner to a badge to indicate a loading state.

Syncing Updating Processing

---
import { Badge } from '@bejamas/ui/components/badge';
import { Spinner } from '@bejamas/ui/components/spinner';
---

<div class="flex items-center gap-4 [--radius:1.2rem]">
  <Badge>
    <Spinner data-icon />
    Syncing
  </Badge>
  <Badge variant="secondary">
    <Spinner data-icon />
    Updating
  </Badge>
  <Badge variant="outline">
    <Spinner data-icon />
    Processing
  </Badge>
</div>

View CodeHide Code

Input Group

Validating... Send

---
import { ArrowUpIcon } from '@lucide/astro';

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea } from '@bejamas/ui/components/input-group';
import { Spinner } from '@bejamas/ui/components/spinner';
---

<div class="flex w-full max-w-md flex-col gap-4">
  <InputGroup>
    <InputGroupInput placeholder="Send a message..." disabled />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupTextarea placeholder="Send a message..." disabled />
    <InputGroupAddon align="block-end">
      <Spinner /> Validating...
      <InputGroupButton class="ml-auto" variant="default">
        <ArrowUpIcon />
        <span class="sr-only">Send</span>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>

View CodeHide Code