Buefy — Loading Placeholder and Sidebar

Photo by Erol Ahmed on Unsplash

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Skeleton Loading Placeholder

Buefy comes with a skeleton component that we can use as a placeholder to show when content is loading.

To add it, we can use the b-skeleton component:

<template>
  <section>
    <b-skeleton width="20%" animated></b-skeleton>
    <b-skeleton width="40%" animated></b-skeleton>
    <b-skeleton width="60%" animated></b-skeleton>
    <b-skeleton width="80%" animated></b-skeleton>
  </section>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

width has the width of the bar as the percentage of the screen viewport.

animated makes it animated.

Also, we can add a circle placeholder with the circle prop:

<template>
  <section>
    <figure class="media-left">
      <p class="image is-64x64">
        <b-skeleton circle width="64px" height="64px"></b-skeleton>
      </p>
    </figure>
  </section>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>