Tutorial

Displaying Content Placeholders in Vue.js with vue-content-loader

Published on April 10, 2018
Default avatar

By Joshua Bemenderfer

Displaying Content Placeholders in Vue.js with vue-content-loader

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

You might not have noticed yet, but several major apps are migrating away from the indefinite loading circle indicator paradigm (say that five times fast). Why? Because, while it’s better than nothing, it still makes users feel impatient waiting for their content to load. So what do they use instead? Loading placeholders. They’re usually low-contrast blocks that have the approximate shape of the intended content, sometimes animated. You’ve probably noticed such elements on Slack, Instagram, or even Facebook! We wrote a guide on how to make them yourself, but there’s a great Vue.js component that can provide such elements for you: vue-content-loader.

Dependencies

This guide assumes you have a Vue.js project already set up. If not, go ahead and start a new Vue project using vue-cli 3.0 and the default options. Running $ vue create my-new-project and hitting enter a couple times should be sufficient.

Next, install vue-content-loader from npm:

$ npm install vue-content-loader

Note: This is a component, not a plugin, so we don’t need to enable anything in main.js here.

Usage

<template>
<div class="content-wrapper">
    <!-- Displays if myData is not set.
    Options
    speed: Number - How many seconds between pulses of the loader.
    height / width: Number - size of the loader contents.
    primaryColor: String - The color of the elements.
    secondaryColor: String - The color of the pulser.
    animate: Boolean - Whether or not to display the pulser.
    -->
    <content-loader v-if="!myData"
      :speed="2"
      :animate="true"
    ></content-loader>
    <div v-else class="my-real-content">
      <!-- Your real loaded data goes in here. -->
      <p>{{myData}}</p>
    </div>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader';

export default {
  components: {
    ContentLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>

Default Content Loader

Well, that’s underwhelming. Just a little boring square. :/ The ContentLoader component is actually supposed to be a wrapper for your own custom loader SVG elements. WHAT?! You scream. I HAVE TO GO MAKE MY OWN SVGS FOR A CONTENT LOADER?

Umm, yes! There’s a fancy online GUI tool that will generate the code for you! Not bad at all!

Here’s a cute-little car-shaped one I made using that generator: (I tried to make an alligator, but I lack the necessary skills and fine motor control.)

<content-loader>
  <circle cx="333.40099117860757" cy="371.67099117860755" r="45.40099117860754"/>
  <circle cx="132.26035793053342" cy="377.5303579305334" r="45.260357930533424"/>
  <circle cx="289.53897688809354" cy="305.8089768880935" r="54.53897688809353"/>
  <rect x="80.04" y="312.09" rx="0" ry="0" width="324" height="66" transform="rotate(0.06, 80.04, 312.09)"/>
  <circle cx="163.7954915950234" cy="303.06549159502345" r="48.79549159502341"/>
  <rect x="159.7" y="255.09" rx="0" ry="0" width="131" height="64" transform="rotate(357.56, 159.7, 255.09)"/>
</content-loader>

Still too much effort? vue-content-loader comes with a number of built-in styles, including:

Facebook

Facebook Content Loader

Bullet

Bullet Content Loader

Code

Code Content Loader

List

List Content Loader

Instagram

Instagram Content Loader

These can be used by simply importing them directly from vue-content-loader and using them in place of the content-loader component:

<template>
<div class="content-wrapper">
  <!-- Displays if myData is not set. -->
  <facebook-loader v-if="!myData"
    :speed="2"
  ></facebook-loader>
  <div v-else class="my-real-content">
    <!-- Your real loaded data goes in here. -->
    <p>{{myData}}</p>
  </div>
</div>
</template>

<script>
import { FacebookLoader } from 'vue-content-loader';
// Or: InstagramLoader | CodeLoader | ListLoader | BulletListLoader

export default {
  components: {
    FacebookLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel