Spinner

Süresi bilinmeyen kısa beklemeler için belirsiz bir yükleme göstergesi. currentColor'ı aldığı için içinde durduğu metne ya da butona uyar.

<Spinner label="Yükleniyor" />

Import

import { Spinner } from "@merid/react";

Örnekler

Boyutlar

Çaplar 14px (sm), 18px (md, varsayılan) ve 24px (lg).

<Spinner size="sm" label="Yükleniyor" />
<Spinner size="md" label="Yükleniyor" />
<Spinner size="lg" label="Yükleniyor" />

Metnin yanında

Neyin yüklendiğini görünür bir metin zaten söylüyorsa spinner'ı yardımcı teknolojiden gizlemek için label={null} ver; böylece mesaj iki kez okunmaz.

<Stack direction="row" gap={2} align="center">
<Spinner size="sm" label={null} />
<Text size="sm" as="span">Faturalar yükleniyor…</Text>
</Stack>

Renk

color'ı spinner'a ya da bir üst elemana ver. Tek başına duruyorsa ona özel bir label ver.

<span style={{ color: "var(--mrd-accent)" }}>
<Spinner size="lg" label="Yükleniyor" />
</span>

API referansı

Bir span render'lar; ref'ini iletir ve native attribute'ları aktarır.

Stil verme

Component değişkeni: her boyut için ayarlanan --mrd-spinner-size.

.hero .mrd-spinner {
  --mrd-spinner-size: 32px;
}

Erişilebilirlik

• Etiket verildiğinde spinner role="status" ve aria-label taşır, ekran okuyucular onu araya girmeden okur.
• label={null} ile aria-hidden olur. Yüklenen bölgeyi aria-busy="true" ile işaretle.
• prefers-reduced-motion açıkken dönüş durmaz, yavaşlar; böylece ilerleme görünür kalır.

Kullanım ilkeleri

İlgili sayfalar

• Button: loading bu spinner'ı butonun içinde gösterir.
• Skeleton: yüklenen içerik için yer tutucu.
• Progress: ilerlemesi ölçülebilen işler için.