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
.
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:
Note: This is a component, not a plugin, so we don’t need to enable anything in main.js
here.
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.)
Still too much effort? vue-content-loader
comes with a number of built-in styles, including:
Bullet
Code
List
These can be used by simply importing them directly from vue-content-loader
and using them in place of the content-loader
component:
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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.
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!