Laddningsindikatorn, eller spinnern, visar användaren att deras begäran har tagits emot och att innehållet håller på att laddas.
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:
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.
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 |
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> |
<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>
<jv-loadspinner>
<span>Laddar...</span>
</jv-loadspinner>
<jv-loadspinner color="#0b4666">
<span style="color: #0b4666">Laddar...</span>
</jv-loadspinner>
<jv-loadspinner size="2em">
<span style="font-size: 2em">Laddar...</span>
</jv-loadspinner>