For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
shadcn-cssinjs
119

Spinner

PreviousNext

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

Processing payment...
$100.00
import {
  Item,
  ItemContent,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/spinner.json

Usage

import { Spinner } from "@/components/ui/spinner";
<Spinner />

Customization

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

import { LoaderIcon } from "lucide-react";

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

const Spinner = ({ className, ...props }: React.ComponentProps<"svg">) => (
  <LoaderIcon
components/ui/spinner.tsx
import { LoaderIcon } from "lucide-react";
 
import { cn } from "@/lib/utils";
 
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <LoaderIcon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  );
}
 
export { Spinner };

Size

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

import { Spinner } from "@/components/ui/spinner";

export function SpinnerSize() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-3" />

Button

Add a spinner to a button to indicate a loading state. Place the <Spinner /> before the label with data-icon="inline-start" for a start position, or after the label with data-icon="inline-end" for an end position.

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerButton() {
  return (
    <div className="flex flex-col items-center gap-4">

Badge

Add a spinner to a badge to indicate a loading state. Place the <Spinner /> before the label with data-icon="inline-start" for a start position, or after the label with data-icon="inline-end" for an end position.

SyncingUpdatingProcessing
import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";

export function SpinnerBadge() {
  return (
    <div className="flex items-center gap-4 [--radius:1.2rem]">

Input Group

Validating...
import { ArrowUpIcon } from "lucide-react";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,

Empty

Processing your request
Please wait while we process your request. Do not refresh the page.
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

جاري معالجة الدفع...
١٠٠.٠٠ دولار
"use client";

import * as React from "react";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";