Tijdelijke aanduidingen

Gebruik tijdelijke aanduidingen voor het laden van uw componenten of pagina's om aan te geven dat er mogelijk nog iets wordt geladen.

Op deze pagina

Over

Tijdelijke aanduidingen kunnen worden gebruikt om de ervaring van uw toepassing te verbeteren. Ze zijn alleen gebouwd met HTML en CSS, wat betekent dat je geen JavaScript nodig hebt om ze te maken. U hebt echter wat aangepast JavaScript nodig om hun zichtbaarheid te wijzigen. Hun uiterlijk, kleur en maatvoering kunnen eenvoudig worden aangepast met onze gebruiksklassen.

Voorbeeld

In het onderstaande voorbeeld nemen we een typische kaartcomponent en maken deze opnieuw met tijdelijke aanduidingen die zijn toegepast om een "laadkaart" te maken. Grootte en verhoudingen zijn hetzelfde tussen de twee.

Kaart titel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

Ergens heengaan

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

Hoe het werkt

Maak tijdelijke aanduidingen met de .placeholderklasse en een rasterkolomklasse (bijv. .col-6) om de width. Ze kunnen de tekst in een element vervangen of als modificatieklasse aan een bestaande component worden toegevoegd.

We passen extra styling toe op .btns via ::beforeom ervoor te zorgen dat deze heightwordt gerespecteerd. U kunt dit patroon naar behoefte uitbreiden voor andere situaties, of een  binnen het element toevoegen om de hoogte weer te geven wanneer de werkelijke tekst op zijn plaats wordt weergegeven.

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

Het gebruik van aria-hidden="true"geeft alleen aan dat het element verborgen moet zijn voor schermlezers. Het laadgedrag van de tijdelijke aanduiding hangt af van hoe auteurs de stijlen voor tijdelijke aanduidingen daadwerkelijk zullen gebruiken, hoe ze van plan zijn dingen bij te werken, enz. Er kan enige JavaScript-code nodig zijn om de status van de tijdelijke aanduiding om te wisselen en AT-gebruikers over de update te informeren.

Breedte

U kunt de kolomklassen widthdoor het raster, de breedtehulpprogramma's of inline-stijlen wijzigen.

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Kleur

Standaard placeholdergebruikt de currentColor. Dit kan worden overschreven met een aangepaste kleur of gebruiksklasse.

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

Maatvoering

De grootte van .placeholders is gebaseerd op de typografische stijl van het bovenliggende element. Pas ze aan met formaataanpassingen: .placeholder-lg, .placeholder-sm, of .placeholder-xs.

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Animatie

Animeer tijdelijke aanduidingen met .placeholder-glowof .placeholder-waveom de perceptie van iets dat actief wordt geladen, beter over te brengen.

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Variabelen

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;