Skeleton

Skeletons are elements that are used as placeholders for content that is still loading. The user thus has an indicator that the content is still loading and at the same time gets a visual bridging of the loading time. As a result, the user perceives the loading time to be shorter, which improves the overall user experience.

Our skeletons are build only using HTML and CSS. Therefore you do not need any JavaScript to create the animation or the element itself. However, you still need to toggle the relevant HTML with JavaScript or any framework to replace the skeletons with the content after it has been loaded.

There are certain guidelines or recommendations for the skeletons that you should follow. You can find them in the design tab under General -> Skeleton.

In the following example you will find a typical product tile and its counterpart with our skeletons.

To create skeletons, use the .skeleton class on an element, preferably a <span>. To specify the width of the skeleton, use a grid, our sizing utitlities or fixed values. Just replace the content of the elements with the <span>.

preview

<span class="skeleton medium col-4">
</span>

To get a kind of "wave" or "shimmer" animation, use the additional class .shimmer on your <span> element. This animation creates the effect of an active loading content.

preview

<span class="skeleton medium shimmer col-4">
</span>

We have already learned above how to specify the width of a skeleton. However, there are several ways to adjust the height of the skeletons. On the one hand, you can use our three modifier classes .slim, .medium and .thick. In addition, you can of course pass a fixed value to the element at any time. The height should always be set, otherwise the skeleton element might not be visible.

preview

<p aria-hidden="true">
    <span class="skeleton slim shimmer col-4 mb-1">
    </span>
    <br />
    <span class="skeleton medium shimmer col-4 mb-1">
    </span>
    <br />
    <span class="skeleton thick shimmer col-4 mb-1">
    </span>
    <br />
    <span class="skeleton shimmer col-4" style="height:4rem">
    </span>
</p>

For more complex elements or larger groups, you should ideally use the aria-label aria-hidden="true". This way the element will be ignored by screen readers. In addition, the tab index should be set to -1 for links or interactive elements: tabindex="-1" together with the style pointer-events: none;. This makes them no longer selectable for the user and removes :hover, :active, :focus events as long as there is no relevant content here. However, it should not be forgotten to adjust these values again after loading the content. An perfect example is the product tile.

preview

<div class="cake-example-cutted-shadow-fix" id="showbox">
    <div class="row">
        <div class="col-6 col-md-3 mb-2 mb-md-0">
            <a href="#" class="card product-tile-card ">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="placeholder" class="card-img-top" folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body product-tile-card-body">
                    <h3 class="card-title product-tile-card-title">Product title</h3>
                    <p class="card-text product-tile-card-text">Product description</p>
                </div>
            </a>
        </div>
        <div class="col-6 col-md-3 mb-2 mb-md-0">
            <a href="#" tabindex="-1" style="pointer-events:none" class="card product-tile-card"
                aria-hidden="true">
                <div class="card-img-top skeleton skeleton-4-to-3 shimmer">
                </div>
                <div class="card-body product-tile-card-body">
                    <h3 class="card-title product-tile-card-title">
                        <span class="skeleton medium shimmer col-8">
                        </span>
                    </h3>
                    <p class="card-text product-tile-card-text">
                        <span class="skeleton slim shimmer col-12">
                        </span>
                        <span class="skeleton slim shimmer col-10">
                        </span>
                    </p>
                </div>
            </a>
        </div>
    </div>
</div>

To make it easier for you to work with media content such as images, we have created two additional modifier classes to give the skeleton a certain image ratio. This way, you only have to specify the width and automatically get the correct aspect ratio.

preview

<p aria-hidden="true">
    <span class="skeleton skeleton-4-to-3 shimmer col-4 mb-1">
    </span>
    <br />
    <span class="skeleton skeleton-16-to-9 shimmer col-4">
    </span>
</p>