Skeleton

<b-skeleton> is a BootstrapVue custom component, that allows you to display a loading state for several component types while your data is being fetched or computed.

Available in BootstrapVue since v2.17.0

Example: Basic usage

<template>
  <div>
    <div class="d-flex align-items-center mb-3">
      <b-progress class="w-100" :max="maxLoadingTime" height="1.5rem">
        <b-progress-bar :value="loadingTime" :label="`${((loadingTime / maxLoadingTime) * 100).toFixed(2)}%`"></b-progress-bar>
      </b-progress>

      <b-button class="ml-3" @click="startLoading()">Reload</b-button>
    </div>

    <b-skeleton-wrapper :loading="loading">
      <template v-slot:loading>
        <b-card>
          <b-skeleton width="85%"></b-skeleton>
          <b-skeleton width="55%"></b-skeleton>
          <b-skeleton width="70%"></b-skeleton>
        </b-card>
      </template>

      <b-card>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
        non rhoncus elit tincidunt vitae. Vestibulum maximus, ligula eu feugiat molestie,
        massa diam imperdiet odio, vitae viverra ligula est id nisi. Aliquam ut molestie est.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Phasellus at consequat dui. Aenean tristique sagittis quam,
        sit amet sollicitudin neque sodales in.
      </b-card>
    </b-skeleton-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        loadingTime: 0,
        maxLoadingTime: 3
      }
    },
    watch: {
      loading(newVal, oldValue) {
        if (newVal !== oldValue) {
          this.clearLoadingTimeInterval()

          if (newVal) {
            this.$_loadingTimeInterval = setInterval(() => {
              this.loadingTime++
            }, 1000)
          }
        }
      },
      loadingTime(newVal, oldValue) {
        if (newVal !== oldValue) {
          if (newVal === this.maxLoadingTime) {
            this.loading = false
          }
        }
      }
    },
    created() {
      this.$_loadingTimeInterval = null
    },
    mounted() {
      this.startLoading()
    },
    methods: {
      clearLoadingTimeInterval() {
        clearInterval(this.$_loadingTimeInterval)
        this.$_loadingTimeInterval = null
      },
      startLoading() {
        this.loading = true
        this.loadingTime = 0
      }
    }
  }
</script>

<!-- b-skeleton.vue -->

Types

<b-skeleton> supports various basic types, to represent various components in your project.

<h5>Text (default)</h5>
<b-skeleton></b-skeleton>

<h5 class="mt-3">Avatar</h5>
<b-skeleton type="avatar"></b-skeleton>

<h5 class="mt-3">Input</h5>
<b-skeleton type="input"></b-skeleton>

<h5 class="mt-3">Button</h5>
<b-skeleton type="button"></b-skeleton>

<!-- b-skeleton-types.vue -->

Skeleton animations

<b-skeleton> supports different animations. You can set them per component or change it globally in the settings.

<h5>Wave (default)</h5>
<b-card>
  <b-skeleton animation="wave" width="85%"></b-skeleton>
  <b-skeleton animation="wave" width="55%"></b-skeleton>
  <b-skeleton animation="wave" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">Fade</h5>
<b-card>
  <b-skeleton animation="fade" width="85%"></b-skeleton>
  <b-skeleton animation="fade" width="55%"></b-skeleton>
  <b-skeleton animation="fade" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">Throb</h5>
<b-card>
  <b-skeleton animation="throb" width="85%"></b-skeleton>
  <b-skeleton animation="throb" width="55%"></b-skeleton>
  <b-skeleton animation="throb" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">None</h5>
<b-card>
  <b-skeleton animation width="85%"></b-skeleton>
  <b-skeleton animation width="55%"></b-skeleton>
  <b-skeleton animation width="70%"></b-skeleton>
</b-card>

<!-- b-skeleton-animations.vue -->

Helper components

Utilize <b-skeleton> helper components to quickly scaffold existing components.

Table

<b-skeleton-table> allows you to scaffold a basic table structure by utilizing the rows and columns props to define the size of the table. You can pass props directly to the table via the table-props property, which supports the same props as <b-table-simple>. Refer to the <b-table-simple> documentation for a complete list.

<b-skeleton-table
  :rows="5"
  :columns="4"
  :table-props="{ bordered: true, striped: true }"
></b-skeleton-table>

<!-- b-skeleton-helper-table.vue -->

Image

Utilize <b-skeleton-img> to represent images. It utilizes a 16:9 aspect ratio by default, for a responsive sizing. You can overwrite this by applying no-aspect and utilize the height and width props to set your own sizing.

<b-row>
  <b-col>
    <b-skeleton-img></b-skeleton-img>
  </b-col>
  <b-col>
    <b-skeleton-img></b-skeleton-img>
  </b-col>
  <b-col cols="12" class="mt-3">
    <b-skeleton-img no-aspect height="150px"></b-skeleton-img>
  </b-col>
</b-row>

<!-- b-skeleton-helper-img.vue -->

Card Image

Use <b-skeleton-img> to represent images in <b-card>. Remember to set the card-img prop to the position of the image. This will apply the proper border-radius.

<b-row>
  <b-col cols="12" md="6">
    <h5>Image top</h5>
    <b-card no-body img-top>
      <b-skeleton-img card-img="top" aspect="3:1"></b-skeleton-img>
      <b-card-body>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
        non rhoncus elit tincidunt vitae.
      </b-card-body>
    </b-card>
  </b-col>
  <b-col cols="12" md="6">
    <h5>Image bottom</h5>
    <b-card no-body img-bottom>
      <b-card-body>
        Vestibulum maximus, ligula eu feugiat molestie, massa diam imperdiet odio, vitae viverra
        ligula est id nisi. Aliquam ut molestie est.
      </b-card-body>
      <b-skeleton-img card-img="bottom" aspect="3:1"></b-skeleton-img>
    </b-card>
  </b-col>
</b-row>

<b-row class="mt-md-3">
  <b-col cols="12" md="6">
    <h5>Image left</h5>
    <b-card no-body img-left>
      <b-skeleton-img card-img="left" width="225px"></b-skeleton-img>
      <b-card-body>
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Phasellus at consequat dui.
      </b-card-body>
    </b-card>
  </b-col>
  <b-col cols="12" md="6">
    <h5>Image right</h5>
    <b-card no-body img-right>
      <b-skeleton-img card-img="right" width="225px"></b-skeleton-img>
      <b-card-body>
        Aenean tristique sagittis quam, sit amet sollicitudin neque sodales in.
      </b-card-body>
    </b-card>
  </b-col>
</b-row>

<!-- b-skeleton-helper-card-img.vue -->

Icons

<b-skeleton-icon> can also be used as placeholder for icons. If you need to use any icon props, you can pass them via the icon-props property.

<b-skeleton-icon
  icon="person"
  :icon-props="{ fontScale: 2 }"
></b-skeleton-icon>

<b-skeleton-icon
  icon="person-fill"
  :icon-props="{ fontScale: 2, variant: 'dark' }"
></b-skeleton-icon>

<!-- b-skeleton-helper-card-icon.vue -->

Note: The throb animation does not work with b-skeleton-icon.

Styling and customization

The <b-skeleton> component and helper components utilizes Bootstrap SCSS variables, as much as possible to best match the styling and sizing of the native components. This means if you've customized Bootstrap SCSS, the skeleton components should adapt to fit your custom theming.

We've also provided a few custom SCSS variables, that can be used to further customize the styling of the various <b-skeleton> components. You can read more about how to change these variables in the theming section.

Component reference

Properties

Property
Type
Default
Description
animation
Settings
String'wave'Changes the component animation, leave empty or `null` to disable the animation
type
String'text'Changes the type, refer to the [types](/#types) section
width
StringSets the `width` of the component
height
StringSets the `height` of the component
size
StringSets the `width` and `height` of the component
variant
StringApplies one of the Bootstrap theme color variants to the component

<b-skeleton-wrapper>

Functional component

Properties

Property
Type
Default
Description
loading
BooleanfalseDetermines whether the loading slot should be displayed

Slots

Slot Name
Description
loading Content to show when the `loading` prop is `true`
default Content to show when the `loading` prop is `false`

<b-skeleton-table>

Functional component

Properties

Property
Type
Default
Description
animation
StringAnimation used for the component in each cell, leave empty or `null` to disable the animation
rows
Number3Amount of rows to display
columns
Number5Amount of columns to display
hide-header
BooleanfalseHides the header of the table
show-footer
BooleanfalseEnables the footer of the table
table-props
ObjectSupports the same props as `<b-table-simple>`

<b-skeleton-img>

Functional component

Properties

Property
Type
Default
Description
animation
StringAnimation used for the component, leave empty or `null` to disable the animation
aspect
String'16:9'Control the aspect ratio of the image
no-aspect
BooleanfalseRemoves the aspect wrapper around the skeleton
height
StringSets the height of the image. Best used with `no-aspect` set to `true`
width
StringSets the width of the image. Best used with `no-aspect` set to `true`
variant
StringApplies one of the Bootstrap theme color variants to the component
card-img
StringIf used as an card image, use this prop to set the position. Accepted values are `top`, `bottom`, `left` and `right`

<b-skeleton-icon>

Functional component

Properties

Property
Type
Default
Description
animation
Settings
String'wave'Animation used for the component, leave empty or `null` to disable the animation
icon
StringIcon to display
icon-props
ObjectProperties to pass on to the icon. Refer to `<b-icon>` property references

Importing individual components

You can import individual components into your project via the following named exports:

Component
Named Export
Import Path
<b-skeleton>BSkeletonbootstrap-vue
<b-skeleton-wrapper>BSkeletonWrapperbootstrap-vue
<b-skeleton-table>BSkeletonTablebootstrap-vue
<b-skeleton-img>BSkeletonImgbootstrap-vue
<b-skeleton-icon>BSkeletonIconbootstrap-vue

Example:

import { BSkeleton } from 'bootstrap-vue'
Vue.component('b-skeleton', BSkeleton)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export
Import Path
SkeletonPluginbootstrap-vue

Example:

import { SkeletonPlugin } from 'bootstrap-vue'
Vue.use(SkeletonPlugin)