72Başlayın
HextaUI

Spinner

Apple tarzı çentiklere ya da nefes alan bir halkaya sahip, göstermeden önce bekleyebilen ve titremesin diye yeterince uzun kalan bir yükleme göstergesi.

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

export function SpinnerDemo() {
  return (
    <div className="flex items-center gap-10">
      <Spinner size="xl" />
      <Spinner size="xl" variant="ring" />
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/spinner.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import { Spinner } from "@/components/ui/spinner"
<Spinner />
<Spinner variant="ring" size="lg" />
<Spinner loading={isFetching} />

Varsayılan, Apple platformlarındaki sekiz kollu göstergedir. variant="ring" yayı büyüyüp küçülürken döner; böylece takılı kalmış değil çalışıyor gibi okunur. İkisi de geçerli metin renginde çizilir.

Örnekler

Titremesiz

loading verin; spinner göstermeden önce delay (150ms) bekler, böylece hızlı yüklemelerde hiç çakmaz, ardından görünür olunca en az minDuration (400ms) kalır.

"use client"

import * as React from "react"

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

export function SpinnerDelayed() {
  const [loading, setLoading] = React.useState(false)

  const load = (ms: number) => {
    setLoading(true)
    setTimeout(() => setLoading(false), ms)
  }

  return (
    <div className="flex max-w-full min-w-0 flex-col items-center gap-4">
      <div className="flex size-8 items-center justify-center">
        <Spinner loading={loading} size="lg" />
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        <Button variant="outline" size="sm" onClick={() => load(100)}>
          Fast load (100ms)
        </Button>
        <Button variant="outline" size="sm" onClick={() => load(250)}>
          Load (250ms)
        </Button>
        <Button variant="outline" size="sm" onClick={() => load(2000)}>
          Slow load (2s)
        </Button>
      </div>
    </div>
  )
}

Boyutlar

İki varyant için de sm, default, lg ve xl.

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

const sizes = ["sm", "default", "lg", "xl"] as const

export function SpinnerSizes() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-6">
        {sizes.map((size) => (
          <Spinner key={size} size={size} />
        ))}
      </div>
      <div className="flex items-center gap-6">
        {sizes.map((size) => (
          <Spinner key={size} size={size} variant="ring" />
        ))}
      </div>
    </div>
  )
}

Satır içi

Metnin yanında spinner'ı aria-hidden işaretleyin ki sözcükler konuşsun. Tek başınayken label değerini duyurur.

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

export function SpinnerInline() {
  return (
    <div className="flex flex-col items-start gap-4 text-sm">
      <p className="flex items-center gap-2 text-muted-foreground">
        <Spinner size="sm" aria-hidden />
        Saving changes…
      </p>
      <Badge>
        <Spinner variant="ring" aria-hidden />
        Deploying
      </Badge>
      <p className="flex items-center gap-2 text-primary">
        <Spinner size="sm" label="Syncing" />
        Spinners use the text color around them.
      </p>
    </div>
  )
}

Düğmelerde

Button ve Command yükleme durumları için bu spinner'ı kullanır; düğmenin simgelerine göre boyutlandırılmıştır.

"use client"

import { IconRefresh } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

function save() {
  return new Promise((resolve) => setTimeout(resolve, 1600))
}

export function SpinnerButton() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button feedback loadingLabel="Saving…" onClick={save}>
        Save changes
      </Button>
      <Button
        variant="outline"
        size="icon"
        aria-label="Refresh"
        feedback
        onClick={save}
      >
        <IconRefresh />
      </Button>
    </div>
  )
}

Erişilebilirlik

  • Tek başına spinner, label (“Loading”) ile adlandırılan bir status'tur.
  • aria-hidden ile rolünü bırakır; görünür metnin yanında veya meşgul bir düğmenin içinde kullanım için.
  • Azaltılmış harekette dönmek yerine hafifçe nabız atar; böylece yine de bir şeylerin olduğunu gösterir.

API referansı

Spinner

PropTürVarsayılan
variant
"ticks" | "ring""ticks"
sizenull boyutlandırmayı üst öğeye bırakır.
"sm" | "default" | "lg" | "xl" | null"default"
label
string"Loading"
loadingGecikmeli göstermeyi açar. Her zaman göstermek için vermeyin.
boolean–
delay
number150
minDuration
number400
animatedAnimasyonu gizlemeden duraklatır.
booleantrue
ÖznitelikAçıklama
data-slot="spinner"SVG; data-variant ile.

useDelayedLoading

const visible = useDelayedLoading(isFetching, { delay: 150, minDuration: 400 })

Aynı zamanlama bir hook olarak da var; skeleton'lar, bindirmeler veya çakmaması gereken her şey için. useDelayedLoading kılavuzuna bakın.

İlgili

Kullanıldığı bloklar

Spinner üzerine kurulan bloklar.