A loading spinnert akkor használjuk, ha egy művelet – letöltés, feltöltés, adatok feldolgozása – folyamatban van, de hosszabb időt vesz igénybe.
Fejlesztői dokumentáció
Spinner: Az animált elem.
Text: Bővebb információt adó szöveges tartalom. (opcionális)
A loading spinner variánsait meghatározott használati esetekre hoztuk létre. A szolgáltatásokon átívelő, egységes felhasználói élmény miatt fontos, hogy mindig a megfelelő variánst használjuk.
Az önálló variánst egész oldalak betöltésénél használjuk.
A beágyazott variánst komponenseken belül használjuk.
A determinate variánst akkor használjuk, ha a művelet előrehaladása vagy hossza kiszámítható. Ilyen lehet egy ismert méretű fájl feltöltése.
Az indeterminate variánst akkor használjuk, ha a művelet előrehaladása vagy hossza nem határozható meg. Ilyen lehet egy szerverhez történő újracsatlakozás.
Ha szükséges, a text attribútummal szöveges információt is megadhatunk a műveletről.
A loading spinner önálló variánsa egy, beágyazott variánsa 6 méretben érhető el. A beágyazott variáns méretét a rendelkezésre álló hely függvényében kell kiválasztani.
A gombok töltési (loading) állapotában rövid késleltetés után jelenik meg a loading spinner.
A loading állapotra vonatkozó útmutató a Button komponensnél található.
Ha túl hosszú a szöveg, akkor több sorba törik.
Oldalak közötti váltásnál vagy folyamatok végén az oldal közepére pozicionáljuk a loading spinnert, és backdropot rakunk mögé.
A design system legtöbb komponense rendelkezik előre meghatározott loading állapottal. A loading spinner máshol is használható, de az implementációnál követni kell az útmutatóban leírtakat.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A kontraszt minimumokat a design system legsötétetebb – sötét módban a legvilágosabb – hátterén generáljuk, emiatt ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A komponens állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. Így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információkat.
A loading spinner eltűnése másodlagos jelentéssel bír. Jelentheti azt, hogy valami nem tölt, illetve azt, hogy befejeződött a töltés.
Ha a művelet pár másodpercnél tovább tart, a felhasználó nem biztos, hogy észreveszi a loading spinner eltűnését. Ilyenkor jeleznünk kell, hogy a rendszer már nem tölt, és használatra kész.
Ha a művelet után új tartalomra helyeződik a fókusz – például betölt egy teljes oldal –, akkor a felhasználó megérti, hogy a rendszer már elérhető.
Ha a loading spinner eltűnésével nem változik a fókusz, akkor egy státusz üzenettel – például Kész vagy Betöltés befejezve – figyelmeztethetjük a felhasználót. Ezt az ARIA live role=“status” attribútummal implementálhatjuk az asszisztív technológiák számára.
A komponens mögötti SVG alapértelmezetten “Töltés” alternatív szöveggel van ellátva. Ha a komponens szöveget is tartalmaz, akkor a szöveget aria-label helyett aria-describedby-jal asszociáljuk az ikonhoz.
