Spinner

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/spinner.json

Użycie#

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

<Spinner label="Loading comments" />

Spinner w prfct to dwanaście zwężających się kresek, które obracają się w dwunastu skokach. Skokowy ruch od razu odczytuje się jako „trwa praca”, a zwężające się kreski nadal przypominają spinner, nawet gdy przy ograniczonym ruchu zastyga on na jednej klatce.

Przykłady#

Rozmiary#

Spinner ma size-4 (16 px) — rozmiar ikon w całym systemie — więc pasuje do przycisków, pól i elementów menu bez żadnych poprawek. Skaluj go klasami size-*; to SVG, więc w każdym rozmiarze pozostaje ostry.

Kolory#

Kreski używają currentColor. Domyślnie spinner dziedziczy kolor otaczającego tekstu; inny kolor ustawisz klasą text-* — text-muted-foreground sprawdzi się przy cichej, drugoplanowej pracy.

W przyciskach#

W pierwszej kolejności sięgaj po prop loading komponentu Button: zachowuje szerokość i fokus przycisku oraz ustawia aria-busy. Składaj spinner samodzielnie tylko wtedy, gdy etykieta ma się zmieniać w trakcie akcji.

<Button variant="outline" disabled>
  <Spinner data-icon="inline-start" aria-hidden="true" label="" />
  Generating report…
</Button>

Ładowanie sekcji#

W panelu, który pobiera dane, wyśrodkuj spinner i dodaj krótkie zdanie o tym, co się dzieje. Jeśli znasz układ treści, zwykle lepszym wyborem jest Skeleton.

Wytyczne#

Kiedy używać#

• Gdy trwa żądanie, które ktoś sam wywołał: zapisywanie, wysyłanie, odświeżanie.
• Przy pracy w tle związanej z konkretną kontrolką lub wierszem: Synchronizowanie… obok pliku.

Kiedy nie używać#

• Przy oczekiwaniu krótszym niż około sekunda. Opóźnij spinner o ~300 ms, żeby przy szybkich odpowiedziach w ogóle się nie pojawiał.
• Przy długich zadaniach z mierzalnym postępem — użyj komponentu Progress.
• Przy treści o znanym układzie — użyj komponentu Skeleton.

Jeden spinner naraz#

Strona pełna spinnerów mówi: „wszystko się zepsuło”. Pokaż wskaźnik tam, gdzie skupia się uwaga — przy naciśniętym przycisku, przy zmienionym wierszu — a resztę interfejsu zostaw w pełni używalną.

Dostępność#

• Samodzielny spinner renderuje role="status" z aria-label pobranym z propa label (domyślnie Loading albo jego tłumaczenie z LocaleProvider, po polsku Ładowanie). Nadaj mu konkretną etykietę — Ładowanie komentarzy mówi więcej niż Ładowanie.
• Gdy widoczny tekst już opisuje oczekiwanie, umieść role="status" na elemencie nadrzędnym i ukryj spinner przez aria-hidden="true", żeby komunikat nie był odczytywany dwa razy.
• Wewnątrz przycisku spinner jest dekoracyjny: znaczenie niosą etykieta przycisku i aria-busy.
• Przy prefers-reduced-motion obrót zatrzymuje się na jednej klatce. Zwężające się kreski sygnalizują aktywność nawet bez ruchu.

Dokumentacja API#

Spinner#

Renderuje <svg> z data-slot="spinner". Przyjmuje wszystkie propsy SVG.