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, en liten och en fullsidig. 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

Komponent och kod

Fullsidig laddningsindikator

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

Endast HTML och CSS

Vanlig laddningsindiktator

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

Vanlig laddningsindiktator i en mörkblå färg

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

Vanlig laddningsindiktator i en större storlek

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