Zaidan

Command Palette

Search for a command to run...

GitHub43

Spinner

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

Installation

CLI

Manual

Copy and paste the following code into your project.

import { LoaderCircle } from "lucide-solid";
import type { ComponentProps } from "solid-js";
import { splitProps } from "solid-js";


import { cn } from "~/lib/utils";


type SpinnerProps = ComponentProps<"svg"> & {
  class?: string | undefined;
};


const Spinner = (props: SpinnerProps) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    <LoaderCircle
      role="status"
      aria-label="Loading"
      class={cn("z-spinner size-4 animate-spin", local.class)}
      data-slot="spinner"
      {...others}
    />
  );
};


export { Spinner };

Customization

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

components/ui/spinner.tsx
import { Loader2 } from "lucide-solid"
import { splitProps, type ComponentProps } from "solid-js"


import { cn } from "~/lib/utils"


type SpinnerProps = ComponentProps<"svg"> & {
  class?: string | undefined
}


const Spinner = (props: SpinnerProps) => {
  const [local, others] = splitProps(props, ["class"])
  return (
    <Loader2
      role="status"
      aria-label="Loading"
      class={cn("size-4 animate-spin", local.class)}
      {...others}
    />
  )
}


export { Spinner }

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Spinner } from "~/components/ui/spinner";
function SpinnerBasic() {
  return (
    <Example title="Basic">
      <div class="flex items-center gap-6">
        <Spinner />
        <Spinner class="size-6" />
      </div>
    </Example>
  );
}

In Buttons

import { Button } from "~/components/ui/button";
import { Spinner } from "~/components/ui/spinner";
function SpinnerInButtons() {
  return (
    <Example title="In Buttons">
      <div class="flex flex-wrap items-center gap-4">
        <Button>
          <Spinner data-icon="inline-start" /> Submit
        </Button>
        <Button disabled>
          <Spinner data-icon="inline-start" /> Disabled
        </Button>
        <Button variant="outline" disabled>
          <Spinner data-icon="inline-start" /> Outline
        </Button>
        <Button variant="outline" size="icon" disabled>
          <Spinner data-icon="inline-start" />
          <span class="sr-only">Loading...</span>
        </Button>
      </div>
    </Example>
  );
}

In Badges

import { Badge } from "~/components/ui/badge";
import { Spinner } from "~/components/ui/spinner";
function SpinnerInBadges() {
  return (
    <Example title="In Badges" class="items-center justify-center">
      <div class="flex flex-wrap items-center justify-center gap-4">
        <Badge>
          <Spinner data-icon="inline-start" />
          Badge
        </Badge>
        <Badge variant="secondary">
          <Spinner data-icon="inline-start" />
          Badge
        </Badge>
        <Badge variant="destructive">
          <Spinner data-icon="inline-start" />
          Badge
        </Badge>
        <Badge variant="outline">
          <Spinner data-icon="inline-start" />
          Badge
        </Badge>
      </div>
    </Example>
  );
}

In Input Group

import { Field, FieldLabel } from "~/components/ui/field";
import { InputGroup, InputGroupAddon, InputGroupInput } from "~/components/ui/input-group";
import { Spinner } from "~/components/ui/spinner";
function SpinnerInInputGroup() {
  return (
    <Example title="In Input Group">
      <Field>
        <FieldLabel for="input-group-spinner">Input Group</FieldLabel>
        <InputGroup>
          <InputGroupInput id="input-group-spinner" />
          <InputGroupAddon align="inline-end">
            <Spinner />
          </InputGroupAddon>
        </InputGroup>
      </Field>
    </Example>
  );
}

In Empty State

import { ArrowRight } from "lucide-solid";
import { Button } from "~/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "~/components/ui/empty";
import { Spinner } from "~/components/ui/spinner";
function SpinnerInEmpty() {
  return (
    <Example title="In Empty State" containerClass="lg:col-span-full">
      <Empty class="min-h-[300px]">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <Spinner />
          </EmptyMedia>
          <EmptyTitle>No projects yet</EmptyTitle>
          <EmptyDescription>
            You haven't created any projects yet. Get started by creating your first project.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <div class="flex gap-2">
            <Button as="a" href="#">
              Create project
            </Button>
            <Button variant="outline">Import project</Button>
          </div>
          <Button as="a" href="#" variant="link" class="text-muted-foreground">
            Learn more <ArrowRight />
          </Button>
        </EmptyContent>
      </Empty>
    </Example>
  );
}

API Reference

Spinner

Use the Spinner component to display a spinner.

PropTypeDefault
classstring``
<Spinner />
PreviewDocs