LoadingSpinner (Latausindikaattori)
Latausindikaattori on varsinaisen sisällön tilalla esitettävä latauksen ilmaisin, joka kertoo käyttäjälle näkymän, sen osan, tai muun taustalle käynnistetyn latausprosessin tilasta. Komponentilla voidaan ilmaista latauksen käynnissä oleminen sekä tarvittaessa latauksen valmistuminen tai epäonnistuminen.
Saavutettavuus ja käytettävyys
- Latausindikaattoria tulee käyttää vain jos latausaika kestää yli sekunnin. Nopeasti näytöllä vilahtava animaatio on häiritsevä, koska käyttäjä ei ehdi havaitsemaan sitä kunnolla.
- Jos tiedetään, että latausaika kestää yli 10 sekuntia, tilatekstin tulisi sisältää tarkempi tieto latauksen edistymisestä. Esimerkiksi "17 / 1024 valmiina" tai "57 % valmiina".
- Hyvä tilateksti on selkeä ja ytimekäs, ja sen tulee sisältää riittävästi informaatiota, jotta myös ruudunlukijakäyttäjät saavat tiedon latauksen tilasta.
- Saavutettavuuden osalta toteutuksessa on huomioitava, että tieto indikaattorin tilamuutoksista ja ladattavan sisällön valmistumisesta, tai latauksen epäonnistumisesta välitetään ruudunlukijalle. Vaikka tilateksti piilotettaisiin näkyvistä, tulee sen olla kuvaava ja selkeä ruudunlukijakäyttäjiä varten.
- Erityisesti nopeasti tapahtuvan latauksen edistymistietoja, kuten valmistumisprosenttia, ei tarvitse välittää ruudunlukijalle. Tällöin mahdollisesti käytössä olevalle aria-live osiolle tulee latauksen ajaksi asettaa aria-busy attribuutti. Latauksen valmistuminen tai mahdollinen epäonnistuminen tulee tässäkin tapauksessa viestiä myös ruudunlukijakäyttäjille.
Mistä komponentti koostuu
LoadingSpinner koostuu ikonista ja tilatekstistä. Ikoni on tilasta riippuen animoitu tai staattinen. Tilateksti sijaitsee ikonin ala- tai oikealla puolella, ja se on mahdollista piilottaa näkeviltä käyttäjiltä tarvittaessa.
Komponentilla on kolme havaittavaa tilaa:
- lataus on käynnissä
- lataus epäonnistui
- lataus valmistui onnistuneesti
Komponentin koko, käyttö ja variaatiot
Latauksen käynnistyessä latausindikaattori tuodaan näkyviin käyttöliittymään siihen kohtaan, jossa varsinainen sisältö on tarkoitus esittää. Latauksen etenemistä ilmaistaan animaatiolla ja tilatekstillä (esimerkiksi latauksen prosentuaalinen edistyminen). Latauksen valmistuessa latausindikaattori katoaa käyttöliittymästä ja korvautuu varsinaisella sisällöllä automaattisesti.
Latausindikaattori voi koskea koko näkymää, tai sen osaa ja se näytetään käyttöliittymässä siinä kohdassa, jossa ladattava sisältö sijaitsee.
Normaali käyttötapaus
Latauksen päätyttyä indikaattori poistuu näkyvistä.
Onnistumista indikoiva tila
Tässä esimerkissä lataus valmistuu onnistuneesti.
Epäonnistumista indikoiva tila
Tässä esimerkissä lataus päättyy epäonnistumiseen.