Skeleton

Skeleton

Skeleton is a simple container element that alters how other Adwave elements within it are displayed and adds an animated mask over the content.

Example:


<div class="box flexbox column" style="padding: 2em">
    <button
        class="btn"
        style="width: fit-content; margin-bottom: 1em"
        onmousedown="document.querySelector('#skeleton-example').classList.toggle('skeleton')"
    >
        Toggle Skeleton
    </button>
    <div class="card">
        <div id="skeleton-example" class="skeleton flexbox column">
            <h1 class="header">Some header text</h1>
            <span class="subtitle">Some subtitle text</span>
            <span style="margin-bottom: 1.5em"></span>
            <input class="input" style="margin-bottom: 0.5em" />
            <input class="input" style="margin-bottom: 0.5em" />
            <input
                type="checkbox"
                class="checkbox"
                style="place-self: flex-end"
            />
            <span class="separator"></span>
            <adw-switch style="place-self: flex-end"></adw-switch>
            <span class="separator"></span>
            <div class="linked" style="place-self: flex-end">
                <button class="btn">First btn</button>
                <button class="btn">Second btn</button>
            </div>
        </div>
    </div>
</div>

Result:

Some header text

Some subtitle text