Salt la conținutul principal

Prezentare generală

Loader afișează un punct animat într-o capsulă mică cu contur. Folosiți-l în timp ce o operațiune este în desfășurare și procentajul este necunoscut. Pentru progres numeric, utilizați ProgressBar.

Utilizare

Plasați textul de stare vizibil lângă indicatorul de încărcare într-un înveliș. Indicatorul de încărcare este un indicator vizual cu dimensiune fixă și nu acceptă elemente copil. Aplicația gestionează starea de încărcare. Mențineți containerul de stare montat, astfel încât actualizările textului să poată fi anunțate. Încărcătorul nu atribuie implicit nicio etichetă sau niciun rol de regiune live. Folosește aria-hidden="true" atunci când textul din jur sau un buton oferă deja feedback privind încărcarea.

Compunere și etichetare native

Proprietățile native, className, style și ref vizează div-ul container. render acceptă un element sau un callback prin compunerea Base UI. Stilurile suprascriu culorile implicite. LoaderProps este exportat din familia de feedback. Pentru un indicator independent, oferă un rol de stare explicit și un nume accesibil. Punctul animat rămâne decorativ.
Folosește în schimb aria-labelledby atunci când textul vizibil denumește starea. Păstrează montat un proprietar al unei regiuni live atunci când trebuie să anunțe text în schimbare. Aplicația decide când apare feedbackul și ce spune acesta.

Culoare

Transmiteți o culoare din paleta temei pentru a seta atât conturul, cât și punctul. Fără o culoare, încărcătorul moștenește culoarea unui buton din jur, dacă este disponibilă; în caz contrar, folosește culoarea terțiară a textului. Pentru o acțiune de buton, preferați starea de încărcare a Button, care păstrează feedbackul în interiorul controlului.

Proprietăți

Booleanish
Hide a decorative loader when another element supplies loading feedback.
string
Accessible name for a labeled loader status.
string
ID of text that names the loader status.
string
CSS class merged with the loader container class.
"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "turquoise" | "violet" | "yellow"
Theme color for the animated dot and border. When omitted, inherits the button color if available, otherwise the tertiary text color.
Ref<HTMLDivElement>
Ref to the container div, or the element supplied through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Element or render callback composed through Base UI useRender.
AriaRole
Supply status to expose loading feedback as a live region. No role is assigned by default.
CSSProperties
Native styles merged with the loader color defaults. Explicit styles win.