Placeholders

The shape of what is loading

Loading a card

Grey shapes where the words will be; the region says it is busy.

Show the code

<div class="card card-body stack w-100" role="status" aria-busy="true">
<span class="sr-only">Loading the card…</span>
<span class="skeleton" style="height: 20px; width: 40%">
</span>
<span class="skeleton" style="height: 36px; width: 60%">
</span>
<span class="skeleton" style="height: 12px; width: 80%">
</span>
</div>

Loading a list

One row a shape.

Show the code

<ul class="list w-100" aria-busy="true" aria-label="Loading the list">
<li>
<span class="skeleton" style="width: 32px; height: 32px; border-radius: 50%">
</span>
<div class="grow stack tight">
<span class="skeleton" style="height: 12px; width: 50%">
</span>
<span class="skeleton" style="height: 12px; width: 30%">
</span>
</div>
</li>
<li>
<span class="skeleton" style="width: 32px; height: 32px; border-radius: 50%">
</span>
<div class="grow stack tight">
<span class="skeleton" style="height: 12px; width: 50%">
</span>
<span class="skeleton" style="height: 12px; width: 30%">
</span>
</div>
</li>
<li>
<span class="skeleton" style="width: 32px; height: 32px; border-radius: 50%">
</span>
<div class="grow stack tight">
<span class="skeleton" style="height: 12px; width: 50%">
</span>
<span class="skeleton" style="height: 12px; width: 30%">
</span>
</div>
</li>
</ul>