Ga naar hoofdinhoud

Loader

Standard component:​

Voorbeeld HTML
<div class="rvo-loader">
  <span class="rvo-loader__icon rvo-loader__icon--animated">
    <span
      class="utrecht-icon rvo-icon rvo-icon-pijlen-in-cirkel-om-document rvo-icon--2xl rvo-icon--grijs-700"
      role="img"
      aria-label="Pijlen in cirkel om document"
    ></span>
  </span>
</div>
Open in nieuwe tab

Loader met status:​

Het laden duurt iets langer dan verwacht

Voorbeeld HTML
<div class="rvo-loader">
  <span class="rvo-loader__icon rvo-loader__icon--animated">
    <span
      class="utrecht-icon rvo-icon rvo-icon-pijlen-in-cirkel-om-document rvo-icon--2xl rvo-icon--grijs-700"
      role="img"
      aria-label="Pijlen in cirkel om document"
    ></span>
  </span>
  <p class="rvo-loader__warning">
    <span
      class="utrecht-icon rvo-icon rvo-icon-waarschuwing rvo-icon--sm rvo-status-icon-waarschuwing"
      role="img"
      aria-label="Waarschuwing"
    ></span> 
    Het laden duurt iets langer dan verwacht
  </p>
</div>
Open in nieuwe tab

Loader Overlay​

Voorbeeld HTML
<div style="position:relative;width:500px;height:500px">
  <div class="rvo-loader rvo-loader--overlay">
    <span class="rvo-loader__icon rvo-loader__icon--animated">
      <span
        class="utrecht-icon rvo-icon rvo-icon-pijlen-in-cirkel-om-document rvo-icon--2xl rvo-icon--grijs-700"
        role="img"
        aria-label="Pijlen in cirkel om document"
      ></span>
    </span>
  </div>
</div>
Open in nieuwe tab

Loader met acties:​

Voorbeeld HTML
<div class="rvo-loader">
  <span class="rvo-loader__icon rvo-loader__icon--animated">
    <span
      class="utrecht-icon rvo-icon rvo-icon-pijlen-in-cirkel-om-document rvo-icon--2xl rvo-icon--grijs-700"
      role="img"
      aria-label="Pijlen in cirkel om document"
    ></span>
  </span>
  <div class="rvo-loader__actions">
    <button
      class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-xs"
      type="button"
    >
      Probeer het opnieuw
    </button>
    <button
      class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-xs"
      type="button"
    >
      Probleem melden
    </button>
  </div>
</div>
Open in nieuwe tab

Loader met status en acties​

Het laden duurt iets langer dan verwacht

Voorbeeld HTML
<div class="rvo-loader">
  <span class="rvo-loader__icon rvo-loader__icon--animated">
    <span
      class="utrecht-icon rvo-icon rvo-icon-pijlen-in-cirkel-om-document rvo-icon--2xl rvo-icon--grijs-700"
      role="img"
      aria-label="Pijlen in cirkel om document"
    ></span>
  </span>
  <p class="rvo-loader__warning">
    <span
      class="utrecht-icon rvo-icon rvo-icon-waarschuwing rvo-icon--sm rvo-status-icon-waarschuwing"
      role="img"
      aria-label="Waarschuwing"
    ></span> 
    Het laden duurt iets langer dan verwacht
  </p>
  <div class="rvo-loader__actions">
    <button
      class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-xs"
      type="button"
    >
      Probeer het opnieuw
    </button>
    <button
      class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-xs"
      type="button"
    >
      Probleem melden
    </button>
  </div>
</div>
Open in nieuwe tab

Documentatie​

De Loader kan men gebruiken om een tijdelijk laadscherm te tonen als het ophalen van de informatie een korte tijd bedraagd, of het laden van een pagina. Standaard is de loader leeg met alleen een draaiend icoon. Als je de loader over de gehele pagina wil laden vallen, of over een specieke div, maak dan gebruik van overlay. De Loader zal binnen het element vallen als position: relative; wordt gebruikt.

Als na enige tijd het laden nog te lang duurt, kun je een status bericht tonen of twee action buttons tonen. Dit zijn allemaal optionele parameters.

  • Toon altijd een 'loader' bij belangrijke 'verzend'-momenten.
  • Informeer de gebruiker tijdens het tonen van de 'loader' wat er gebeurt.
  • Duurt het laden langer dan 30 seconden laat dan een foutmelding zien en een knop om het opnieuw te proberen.