Placeholder

Loading placeholders, or skeletons, that show where content will appear.

Bootstrap’s placeholder docs describe the markup and CSS.

Example

bsPlaceholder sets .placeholder and a width in grid columns. Hide placeholders from assistive technologies with aria-hidden="true".

<div class="card" style="width: 18rem">
  <div class="card-body">
    @if (loading()) {
      <div aria-hidden="true" class="placeholder-glow">
        <h3 class="card-title h5"><span bsPlaceholder [width]="6"></span></h3>
        <p class="card-text">
          <span bsPlaceholder [width]="7"></span>
          <span bsPlaceholder [width]="4"></span>
          <span bsPlaceholder [width]="4"></span>
          <span bsPlaceholder [width]="6"></span>
        </p>
      </div>
    } @else {
      <h3 class="card-title h5">Card title</h3>
      <p class="card-text">Some quick example text to build on the card title.</p>
    }
    <button type="button" bsButton theme="primary" (click)="loading.set(!loading())">
      {{ loading() ? 'Show content' : 'Show placeholder' }}
    </button>
  </div>
</div>

Sizes and animation

Set size to xs, sm or lg. Animate placeholders with .placeholder-glow, .placeholder-wave or .placeholder-pulse on a parent.

HTML

<div aria-hidden="true" class="vstack gap-2">
  <span bsPlaceholder size="lg"></span>
  <span bsPlaceholder></span>
  <span bsPlaceholder size="sm"></span>
  <span bsPlaceholder size="xs"></span>
  <p class="placeholder-wave mb-0"><span bsPlaceholder [width]="8"></span></p>
  <p class="placeholder-pulse mb-0"><span bsPlaceholder [width]="5"></span></p>
</div>

API

BsPlaceholder

Selector: [bsPlaceholder]

Inputs

Name	Type	Default	Description
`width`	`number`	`12`	Width in grid columns, from 1 to 12.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Height of the placeholder.