Spinner

Prezentare

Indică o operație în curs printr-o regiune de status text, nu doar printr-o animație vizuală.

Când se folosește

• pentru operații scurte, în desfășurare (trimitere, încărcare), unde starea trebuie comunicată și celor care nu văd animația.

Când nu se folosește

• pentru operații suficient de lungi încât ar avea nevoie de un indicator de progres real (procent), nu de un spinner nedeterminat.

Anatomie

Un `<span class="sd-spinner" role="status">` cu `__icon` (decorativ, animat) și text vizual ascuns (de exemplu „Se încarcă…").

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii

Comportament

Animația e CSS pur (`@keyframes sd-spinner-rotate`), redusă de la 0.8s la 2.4s per rotație sub `prefers-reduced-motion: reduce`. `role="status"` anunță textul (nu doar rotația vizuală) către cititoarele de ecran.

Reguli de conținut

• textul spune ce se întâmplă („Se trimite cererea…"), nu doar generic „Se încarcă".

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/88 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/content.css';

<span class="sd-spinner" role="status"><span class="sd-spinner__icon" aria-hidden="true"></span><span class="sd-visually-hidden">Se încarcă…</span></span>

Contract și surse

• Documentația familiei Conținut și date
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).