Skip to main contentSkip to site searchSkip to component search
Honeycomb

Skeleton

The skeleton is used to indicate the loading/processing of a UI layout. It is mainly used to increase the perceived perception of speed.

Details

Skeleton elements include a basic flix-skeleton element with a number of sizing options to help you achieving the desired look. We are providing basic skeleton elements you can use to build almost any kind of UI component or layout built with Honeycomb.

Height options

  <span class="flix-skeleton flix-skeleton--h-xs"></span>
  <span class="flix-skeleton flix-skeleton--h-sm"></span>
  <span class="flix-skeleton flix-skeleton--h-md"></span>
  <span class="flix-skeleton flix-skeleton--h-lg"></span>

Height options have --h-{size} modifier naming scheme and represent components of a different size:

  • flix-skeleton--h-xs mimics horizontal line, has 1px height;
  • flix-skeleton and flix-skeleton--h-sm mimics basic text element;
  • flix-skeleton--h-md mimics headings, tags and similarly sized elements;
  • flix-skeleton--h-lg mimics form elements (automatically adapts between the mobile and desktop form element sizes).

Width options

  <span class="flix-skeleton flix-skeleton--w-xs"></span>
  <span class="flix-skeleton flix-skeleton--w-sm"></span>
  <span class="flix-skeleton flix-skeleton--w-md"></span>
  <span class="flix-skeleton flix-skeleton--w-lg"></span>

Width options have --w-{size} modifier naming scheme and allow for width adjustments:

  • flix-skeleton--w-xs sets element width to 25%;
  • flix-skeleton--w-sm sets element width to 33%;
  • flix-skeleton--w-md sets element width to 50%;
  • flix-skeleton--w-lg sets element width to 75%.

Default width is 100%, width modifiers are useful when creating multi-line text skeletons to give them a real text feel as well as to better match the real interface elements they will be replaced with.

Additional appearance modifiers

  <span class="flix-skeleton flix-skeleton--inline flix-skeleton--h-md flix-skeleton--w-sm"></span>
  <span class="flix-skeleton flix-skeleton--inline flix-skeleton--h-md flix-skeleton--w-sm"></span>
  <span class="flix-skeleton flix-skeleton--round flix-skeleton--h-md flix-skeleton--w-sm"></span>
  <span class="flix-skeleton flix-skeleton--round flix-skeleton--h-sm flix-skeleton--w-sm"></span>
  • flix-skeleton--flush-bottom clears the default bottom margin of the element;
  • flix-skeleton--inline inline variation, allows for stacking several skeletons on one line;
  • flix-skeleton--round increases border radius to mimic tag like elements;

Accessibility

Set aria-live="polite" and aria-busy="true" to your container while it's loading.

This will inform assistive technologies of the current container state and tell users once it's updated.

Once the loading is finished and your container's content is loaded, switch aria-busy to "false".

Usage examples

This section illustrates possible combination of Honeycomb and skeleton elements

<div aria-live="polite" aria-busy="true">
    <div class="flix-grid">
        <div class="flix-col-12 flix-col-6-sm">
            <div class="flix-box">
                <span class="flix-skeleton flix-skeleton--h-md flix-skeleton--w-md"></span>
                <p class="flix-text">
                    <span class="flix-skeleton"></span>
                    <span class="flix-skeleton"></span>
                    <span class="flix-skeleton flix-skeleton--w-lg"></span>
                    <span class="flix-skeleton flix-skeleton--w-sm"></span>
                </p>
                <span class="flix-skeleton flix-skeleton--h-lg flix-skeleton--w-md flix-skeleton--flush-bottom"></span>
            </div>
        </div>
    </div>
</div>

Responsive form skeleton uses flix-grid and flix-skeleton elements combination

<div aria-live="polite" aria-busy="true">
    <div class="flix-grid">
        <div class="flix-col-12 flix-col-4-xl">
            <div class="flix-grid">
                <div class="flix-col-12 flix-col-6-sm">
                    <span class="flix-skeleton flix-skeleton--w-sm"></span>
                    <span class="flix-skeleton flix-skeleton--h-lg"></span>
                </div>
                <div class="flix-col-12 flix-col-6-sm">
                    <span class="flix-skeleton flix-skeleton--w-sm"></span>
                    <span class="flix-skeleton flix-skeleton--h-lg"></span>
                </div>
            </div>
        </div>
        <div class="flix-col-12 flix-col-6-sm flix-col-4-xl">
            <div class="flix-grid">
                <div class="flix-col-6">
                    <span class="flix-skeleton flix-skeleton--w-sm"></span>
                    <span class="flix-skeleton flix-skeleton--h-lg"></span>
                </div>
                <div class="flix-col-6">
                    <span class="flix-skeleton flix-skeleton--w-sm"></span>
                    <span class="flix-skeleton flix-skeleton--h-lg"></span>
                </div>
            </div>
        </div>
        <div class="flix-col-12 flix-col-6-sm flix-col-4-xl">
            <div class="flix-grid flix-grid--align-bottom">
                <div class="flix-col-12 flix-col-6-sm">
                    <span class="flix-skeleton flix-skeleton--w-sm"></span>
                    <span class="flix-skeleton flix-skeleton--h-lg"></span>
                </div>
                <div class="flix-col-12 flix-col-6-sm">
                    <span class="flix-skeleton flix-skeleton--h-lg"></span>
                </div>
            </div>
        </div>
    </div>
</div>