Bootstrap 5.2 / Componenten

Placeholders

Gebruik laad-placeholders voor je componenten of pagina's om aan te geven dat er mogelijk nog iets laadt.

Op deze pagina

Over
Voorbeeld
Hoe het werkt
Sass

Over

Placeholders kun je gebruiken om de ervaring in je applicatie te verbeteren. Ze zijn alleen met HTML en CSS gebouwd, dus je hebt geen JavaScript nodig om ze te maken. Wel heb je wat eigen JavaScript nodig om hun zichtbaarheid te schakelen. Hun uiterlijk, kleur en afmetingen kun je eenvoudig aanpassen met onze utility-klassen.

Voorbeeld

In het onderstaande voorbeeld nemen we een gangbaar card-component en maken we het opnieuw met placeholders om een "ladende card" te krijgen. Formaat en verhoudingen zijn bij beide gelijk.

Card-titel

Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.

Ga ergens heen

HTML

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

  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</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 placeholders met de klasse .placeholder en een grid-kolomklasse (bijv. .col-6) om de width in te stellen. Ze kunnen de tekst binnen een element vervangen of als modifier-klasse aan een bestaand component worden toegevoegd.

We passen via ::before extra styling toe op .btns zodat de height gerespecteerd wordt. Je kunt dit patroon naar behoefte uitbreiden naar andere situaties, of een   binnen het element plaatsen om de hoogte weer te geven wanneer er echte tekst voor in de plaats komt.

HTML

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

Let op

Het gebruik van aria-hidden="true" geeft alleen aan dat het element voor schermlezers verborgen moet zijn. Het laadgedrag van de placeholder hangt af van hoe auteurs de placeholder-stijlen daadwerkelijk gebruiken, hoe ze zaken willen bijwerken, enzovoort. Er kan wat JavaScript-code nodig zijn om de status van de placeholder te wisselen en gebruikers van hulptechnologie over de update te informeren.

Breedte

Je kunt de width wijzigen via grid-kolomklassen, width-utilities of inline stijlen.

HTML

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

Kleur

Standaard gebruikt de placeholder currentColor. Dat kun je overschrijven met een eigen kleur of een utility-klasse.

HTML

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

Afmetingen

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

HTML

<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 placeholders met .placeholder-glow of .placeholder-wave om beter het idee over te brengen dat er actief iets aan het laden is.

HTML

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

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

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.