Laddningsindikator
Laddningsindikatorn, eller spinnern, visar användaren att deras begäran har tagits emot och att innehållet håller på att laddas.
Design och språk
När du ska använda laddningsindikatorn
Laddningsindikatorn ska bara visas under tiden vi väntar på till exempel ett svar från systemet eller på att något laddas upp. Är du säker på att tiden är kortare än 0,5 sekunder behöver du inte ha en indikator.
Det finns två varianter av laddningsindikatorn:
- Den lilla stoppar inte användaren från att fortsätta att använda systemet.
- Den fullsidiga stoppar däremot användaren från att använda systemet till dess att systemet har jobbat klart.
Text under laddningsindikatorn
Ibland kan det vara bra med en beskrivande text under laddningsindikatorn som berättar för användaren vad som händer. Försök att vara så specifik som möjligt. Om du vet att det kan ta lång tid att ladda så skriv det så att användaren förstår att det inte är något fel utan det är värt att vänta.
Exempel på text under indikatorn
Skriv | Skriv inte |
|---|---|
Söker efter växtsorter | Sökning pågår |
Din fil laddas upp | Fil laddas |
Din rapport laddas. Det kan ta upp till 30 sekunder. | Fil laddas |
Dina uppgifter sparas | Uppgifter sparas |
Komponent och kod
Komponenten driftsattes första gången i version 6.0.0.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
|---|---|---|---|---|
show | show | Ska laddningsindikatorn visas? | boolean | false |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - |
Event | Beskrivning | Typ |
|---|---|---|
showChange | Triggas när show-attributet ändras. Du hittar ändrade värdet i "event.detail". | CustomEvent<boolean> |
Event | Beskrivning | Typ |
|---|---|---|
jvLoadspinnerShow | Visar laddningsindikatorn, kan skickas på komponenten eller på document objektet | CustomEvent<boolean> |
jvLoadspinnerHide | Gömmer laddningsindikatorn, kan skickas på komponenten eller på document objektet | CustomEvent<boolean> |
Fullsidig laddningsindikator
<jv-full-page-loadspinner>
<span>Sidan laddas</span>
<span class="cursor">
<span class="sjv-i-cursor"></span>
</span>
<button type="button" class="c-btn--compact" onclick="document.dispatchEvent(new Event('jvLoadspinnerHide'))">Avbryt</button>
</jv-full-page-loadspinner>Endast HTML och CSS
Vanlig laddningsindikator
<jv-loadspinner>
<span>Laddar...</span>
</jv-loadspinner>Vanlig laddningsindikator i en mörkblå färg
<jv-loadspinner color="#0b4666">
<span style="color: #0b4666">Laddar...</span>
</jv-loadspinner>Vanlig laddningsindikator i en större storlek
<jv-loadspinner size="2em">
<span style="font-size: 2em">Laddar...</span>
</jv-loadspinner>Endast HTML och CSS
Senast publicerad
Sidansvarig för sidan är Styleguide