<h6 class="subtitle is-6 is-uppercase has-text-grey">Component</h6><h1 class="title is-serif is-1 has-text-weight-bold">Skeleton</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Squeleton</span> is a blank version of a component that has not been loaded yet. Unlike Loaders, a skeleton screen visually tells users what to expect and make them focus on the progress, rather than the wait time.
</p>

<hr class="is-large is-visible">

<div class="box is-well is-relaxed is-marginless">
    <div class="has-skeleton"></div>
</div>

    <div class="has-skeleton"></div>
<hr class="is-large is-visible">

<h2 class="title is-4 is-family-sans-serif">Anything can be a Skeleton <span class="has-text-weight-normal has-text-red">(Beta)</span></h2>

Add class `has-skeleton` to any empty component to show its skeleton.

<hr class="is-small">

<div class="box is-well is-relaxed is-marginless">
    <div class="avatar"><div class="has-skeleton"></div></div><br><br>
    <div class="box has-skeleton"></div>
    <div class="message has-skeleton"></div>
    <div class="message has-skeleton"></div>
    <div class="box message has-skeleton is-danger">
        The skeleton is visible <strong>only if the content is empty</strong>.
    </div>
</div>

    <div class="avatar"><div class="has-skeleton"></div></div>
    <div class="box has-skeleton"></div>
    <div class="message has-skeleton"></div>
    <div class="message has-skeleton"></div>
    <div class="message has-skeleton">
        The skeleton is visible only if the content is empty.
    </div>
