CSS reference - Bifrost

Home

CSS

Loading skeleton

Also see /react/skeleton

React component

Skeleton elements serve as placeholders for content that is loading.

The idea is to avoid layout shift when dynamic content is received (like you might get with a loading spinner).

Text placeholder

Simulate a line of text with .bf-skeleton-text

<span class="bf-skeleton-text"></span>
<span class="bf-skeleton-text"></span>

Will follow current text line-height. Set a width to simulate headers or multiple lines of text.

<h1>
  <span class="bf-skeleton-text" style="width: 40%"></span>
</h1>
<p>
  <span class="bf-skeleton-text"></span>
  <span class="bf-skeleton-text" style="width: 70%"></span>
</p>
<h1>
  <span class="bf-skeleton-text" style="width: 40%"></span>
</h1>
<p>
  <span class="bf-skeleton-text"></span>
  <span class="bf-skeleton-text" style="width: 70%"></span>
</p>

Rectangle

For more control, you can use .bf-skeleton-rect which is a rectangle with default 24px height and 100% width.

<div class="bf-skeleton-rect"></div>
<div class="bf-skeleton-rect"></div>

Rounded square

Combine with .bf-radius classes and custom width and height to get desired result.

<div class="bf-skeleton-rect bf-radius" style="height: 50px; width: 50px"></div>
<div class="bf-skeleton-rect bf-radius" style="height: 50px; width: 50px"></div>

Circle

<div
  class="bf-skeleton-rect bf-radius-full"
  style="height: 50px; width: 50px"
></div>
<div
  class="bf-skeleton-rect bf-radius-full"
  style="height: 50px; width: 50px"
></div>

Card

Also see /css/card

Combine skeleton with CSS Card classes

<div class="bf-card">
  <div
    class="bf-card-image"
    style="background-image: url(/card/meetingroom.png)"
  ></div>
  <div class="bf-card-title">Card title</div>
  <div class="bf-card-content">
    Card text content on two<br />
    lines
  </div>
</div>
<div class="bf-card">
  <div class="bf-skeleton-rect bf-card-image"></div>
  <div class="bf-card-title">
    <span class="bf-skeleton-text" style="width: 40%"></span>
  </div>
  <div class="bf-card-content">
    <span class="bf-skeleton-text"></span>
    <span class="bf-skeleton-text" style="width: 20%"></span>
  </div>
</div>
<div class="bf-card">
  <div
    class="bf-card-image"
    style="background-image: url(/card/meetingroom.png)"
  ></div>
  <div class="bf-card-title">Card title</div>
  <div class="bf-card-content">
    Card text content on two<br />
    lines
  </div>
</div>
<div class="bf-card">
  <div class="bf-skeleton-rect bf-card-image"></div>
  <div class="bf-card-title">
    <span class="bf-skeleton-text" style="width: 40%"></span>
  </div>
  <div class="bf-card-content">
    <span class="bf-skeleton-text"></span>
    <span class="bf-skeleton-text" style="width: 20%"></span>
  </div>
</div>

Card title

Card text content on two
lines

Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-content bf-page-padding">
  <h1>
    <span class="bf-skeleton-text" style="width: 40%"></span>
  </h1>
  <p>
    <span class="bf-skeleton-text"></span>
    <span class="bf-skeleton-text" style="width: 70%"></span>
  </p>
</div>

Open Sandbox