Styleguide

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.

Parametrar på fullsidig laddningsindikator

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

-


Listener på fullsidig laddningsindikator

Event

Beskrivning

Typ

showChange

Triggas när show-attributet ändras. Du hittar ändrade värdet i "event.detail".

CustomEvent<boolean>


Events på fullsidig laddningsindikator

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

Sidan laddas
HTML 
<jv-full-page-loadspinner>
  <span>Sidan laddas</span>
  <span class="cursor">
    <span class="sjv-i-cursor"></span>
  </span>
  <button class="c-btn--compact" onclick="document.dispatchEvent(new Event('jvLoadspinnerHide'))">Avbryt</button>
</jv-full-page-loadspinner>

Endast HTML och CSS

Vanlig laddningsindiktator

Laddar...
HTML 
<jv-loadspinner>
   <span>Laddar...</span>
</jv-loadspinner>

Vanlig laddningsindiktator i en mörkblå färg

Laddar...
HTML 
<jv-loadspinner color="#0b4666">
   <span style="color: #0b4666">Laddar...</span>
</jv-loadspinner>

Vanlig laddningsindiktator i en större storlek

Laddar...
HTML 
<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