120k
New

Spinner

PreviousNext

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

Base UIReact AriaRadix UI
Radix UI
Processing payment...
$100.00
import {
  Item,
  ItemContent,

Installation

pnpm dlx shadcn@latest add @force-ui/spinner

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 "@material-symbols/svg-400/rounded/progress_activity.svg?react"

import { cn } from "@/lib/utils"
components/ui/spinner.tsx
import LoaderIcon from "@material-symbols/svg-400/rounded/progress_activity.svg?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 }

Colors

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

export function SpinnerColors() {

Sizes

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

export function SpinnerSizes() {

Size

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

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

export function SpinnerSize() {

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"

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"

Input Group

Validating...
import ArrowUpIcon from "@material-symbols/svg-400/rounded/arrow_upward.svg?react"

import {

Empty

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

API

Spinner

PropTypeDefault
color"default" | "primary" | "onPrimary" | "inherit""default"
size"xs" | "sm" | "md" | "lg""sm"

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

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

import * as React from "react"