Platshållare

Använd laddningsplatshållare för dina komponenter eller sidor för att indikera att något fortfarande kan laddas.

På den här sidan

Handla om

Platshållare kan användas för att förbättra upplevelsen av din applikation. De är byggda endast med HTML och CSS, vilket innebär att du inte behöver något JavaScript för att skapa dem. Du kommer dock att behöva lite anpassat JavaScript för att växla deras synlighet. Deras utseende, färg och storlek kan enkelt anpassas med våra verktygsklasser.

Exempel

I exemplet nedan tar vi en typisk kortkomponent och återskapar den med platshållare för att skapa ett "laddningskort". Storlek och proportioner är desamma mellan de två.

Korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Gå någonstans

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

Hur det fungerar

Skapa platshållare med .placeholderklassen och en kolumnklass för rutnät (t.ex. .col-6) för att ställa in width. De kan ersätta texten inuti ett element eller läggas till som en modifieringsklass till en befintlig komponent.

Vi tillämpar ytterligare styling på .btns via ::beforeför att säkerställa att den heightrespekteras. Du kan utöka det här mönstret för andra situationer efter behov, eller lägga till ett  i elementet för att återspegla höjden när verklig text renderas på sin plats.

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>

Användningen av aria-hidden="true"indikerar endast att elementet ska döljas för skärmläsare. Platshållarens laddningsbeteende beror på hur författare faktiskt kommer att använda platshållarstilarna, hur de planerar att uppdatera saker, etc. Viss JavaScript-kod kan behövas för att byta platshållarens tillstånd och informera AT-användare om uppdateringen.

Bredd

Du kan ändra kolumnklasserna för widthgenomgående rutnät, breddverktyg eller inline-stilar.

html

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

Färg

Som standard placeholderanvänder currentColor. Detta kan åsidosättas med en anpassad färg eller nyttoklass.

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>

Dimensionering

Storleken på .placeholders baseras på den typografiska stilen för det överordnade elementet. Anpassa dem med storleksmodifierare: .placeholder-lg, .placeholder-sm, eller .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>

Animation

Animera platshållare med .placeholder-gloweller .placeholder-waveför att bättre förmedla uppfattningen av att något aktivt laddas.

html

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

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

Sass

Variabler

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