From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Adding a loader animation with v-if

Adding a loader animation with v-if - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Adding a loader animation with v-if

- [Man] In this video, we're going to simulate what happens when you have a slow connection to your API and how you can deal with that nicely. When I refresh this, everything loads almost instantaneously because we're just connecting to this very computer that I'm loading this on to retrieve the messages. What if things are slow? Going to go down to my retrieve status messages method here and I'm going to add in a delay parameter. This is something that I've included just for this purpose. So I'm going to set a delay of five seconds like this. I'll save this and switch back to the browser and refresh. And as you can see, nothing's happening here for a while and eventually, the messages will load. And what we'd really like to have here is some sort of loading animation to let us know that something's happening. It's just not quite ready yet. So I'm going to leave this delay in and now we need to deal with this in some way. I'm going to open the loading-process.html file that comes with…

Contents