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.

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

Bild på styleguidens laddningsindikator

Laddningsindikator

<div class="c-spinner">
   <div class="c-spinner__container">
      <div class="c-spinner__animation">
         <div class="c-spinner__animation__item">
            <div class="c-spinner__circle circle--3"></div>
         </div>
         <div class="c-spinner__animation__item">
            <div class="c-spinner__circle circle--2"></div>
         </div>
         <div class="c-spinner__animation__item">
            <div class="c-spinner__circle circle--1"></div>
         </div>
      </div>
      <div class="c-spinner__content">
         <span>Sidan laddas</span>
         <span class="cursor">
            <span class="sjv-i-cursor">
            </span>
         </span> <br><br>
         <button class="c-btn--medium">Avbryt</button>
      </div>
   </div>
</div>

Senast publicerad 2021-05-20

Sidansvarig för sidan är Styleguide