125k

Spinner

PreviousNext

読み込み状態を示すために使用できるインジケーター。

BaseRadixReact Aria
支払いを処理しています...
$100.00
import {
  Item,
  ItemContent,

インストール

pnpm dlx shadcn@latest add spinner

使い方

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

カスタマイズ

Spinner コンポーネントを編集することで、デフォルトのスピナー アイコンを他のアイコンに置き換えることができます。

import { cn } from "cn"
import { LoaderIcon } from "lucide-react"
components/ui/spinner.tsx
import { cn } from "cn"
import { LoaderIcon } from "lucide-react"
 
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-* ユーティリティ クラスを使用して、スピナーのサイズを変更します。

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

export function SpinnerSize() {

ボタン

読み込み状態を示すスピナーをボタンに追加します。 <Spinner /> を開始位置として data-icon="inline-start" を指定してラベルの前に配置するか、終了位置として data-icon="inline-end" を指定してラベルの後に配置します。

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

バッジ

読み込み状態を示すスピナーをバッジに追加します。 <Spinner /> を開始位置として data-icon="inline-start" を指定してラベルの前に配置するか、終了位置として data-icon="inline-end" を指定してラベルの後に配置します。

同期中更新中処理中
import { Badge } from "@/components/ui/radix/badge"
import { Spinner } from "@/components/ui/radix/spinner"

入力グループ

検証中...
import { ArrowUpIcon } from "lucide-react"

import {

空

リクエストを処理しています
リクエストの処理が完了するまでしばらくお待ちください。ページを更新しないでください。
import { Button } from "@/components/ui/radix/button"
import {
  Empty,

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

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

import * as React from "react"