Skeleton

A placeholder for content to load

<template>
    <section>
        <div class="block">
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="animated">Animated</b-switch>
            </div>
        </b-field>
        </div>

        <b-skeleton width="20%" :animated="animated"></b-skeleton>

        <b-skeleton width="40%" :animated="animated"></b-skeleton>

        <b-skeleton width="80%" :animated="animated"></b-skeleton>

        <b-skeleton :animated="animated"></b-skeleton>

    </section>
</template>

<script>
export default {
    data() {
        return {
            animated: true
        }
    }
}
</script>

# Media

<template>
    <section>
        <article class="media" v-for="i in media" :key="i">
            <figure class="media-left">
                <p class="image is-64x64">
                    <b-skeleton circle width="64px" height="64px"></b-skeleton>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <b-skeleton active></b-skeleton>
                        <b-skeleton height="80px"></b-skeleton>
                    </p>
                </div>
                <nav class="level is-mobile">
                    <div class="level-left">
                        <a class="level-item">
                            <span class="icon is-small">
                                <b-skeleton></b-skeleton>
                            </span>
                        </a>
                        <a class="level-item">
                            <span class="icon is-small">
                                <b-skeleton></b-skeleton>
                            </span>
                        </a>
                    </div>
                </nav>
            </div>
        </article>
    </section>
</template>

<script>
export default {
    data() {
        return {
            media: 3
        }
    }
}
</script>

# Card

<template>
    <section>
        <div class="card" aria-id="contentIdForA11y3">
            <div
                class="card-header"
                role="button"
                aria-controls="contentIdForA11y3">
                <p class="card-header-title">
                    <template v-if="!loading">Component</template>
                    <b-skeleton size="is-large" :active="loading"></b-skeleton>
                </p>
            </div>
            <div class="card-content">
                <div class="content">
                    <template v-if="!loading">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
                        <a>#buefy</a>.
                    </template>
                    <b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
                </div>
            </div>
            <footer class="card-footer">
                <a class="card-footer-item">
                    <template v-if="!loading">Save</template>
                    <b-skeleton size="is-large" :active="loading"></b-skeleton>
                </a>
                <a class="card-footer-item">
                    <template v-if="!loading">Edit</template>
                    <b-skeleton size="is-large" :active="loading"></b-skeleton>
                </a>
                <a class="card-footer-item">
                    <template v-if="!loading">Delete</template>
                    <b-skeleton size="is-large" :active="loading"></b-skeleton>
                </a>
            </footer>
        </div>

    </section>
</template>

<script>
export default {
    data() {
        return {
            loading: true
        }
    },
    mounted() {
        setInterval(() => {
            this.loading = !this.loading
        }, 3 * 1000)
    }
}
</script>

# API

Name
Description
Type
Values
Default
activeShow or hide loader Boolean true
animatedDisplay a loading animation Boolean true
roundedRounded style Boolean true
sizeVertical size of skeleton, optional String is-small, is-medium, is-large
widthCustom width String, Number -
heightCustom height String, Number -
circleShow a circle shape Boolean false
countNumber of shapes to display Number 1

# Variables

You can use these variables to customize this component.

Name
Default
$skeleton-backgroundlinear-gradient(90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%)
$skeleton-border-radius$radius
$skeleton-duration1.5s
$skeleton-margin-top.5rem

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub