How To Create A Simple Loading Screen Using Vue

Loading screens are always welcome, because we don't want to just show a blank page to our users while we fetch the necessary data. Or even if we don't have any fetching, and we just want to see how it would look. And that's what I'm here to show you today, how to make a simple (and fake) loading screen using Vue.

First things first, let's find our GIF. In my case, I use Loading.io, it has some free loading GIF's that we can use for our purpose, and we can edit them as we want. This time I'm going to use this one:

Save it inside a folder inside your project (mine is called assets) and we are ready to go.

Ok so now what? Let's start writing some code. We need a component that's going to be the loading screen.

<template>
  <div id="loading">
    <img
      class="img"
      src="../../assets/images/loading.gif"
      alt="loading..."
      width="200"
    />
  </div>
</template>

<script>
export default {
  name: "Loading"
};
</script>

And we can add styles to make it a little bit cooler and center it.

<style>
#loading {
  position: absolute;
  z-index: 1000;
  background-color: white;
  height: 100vh;
  width: 100vw;
  text-align: center;
  line-height: 100vh;
}
.img {
  position: relative;
  margin: auto;
  margin-top: 20%;
}
</style>

(Don't hate my CSS please 😅)

With only this code, we have a component that we can use to mimic a loading screen, but this won't work by it's own, we need to call this component and create the logic behind it. So let's create a view, where we want to show the data after the loading is done. I'm going to create a simple one:

<template>
  <div>
    <LoadingScreen v-if="isLoading"></LoadingScreen>
    <p>Hello World!</p>
  </div>
</template>

<script>
import LoadingScreen from "../components/loadingScreen/LoadingScreen";

export default {
  name: "Inventory",
data() {
    return {
      isLoading: true
    };
  components: {
    LoadingScreen
  }

So what's happening here? We are basically importing the component to our new view, and using 'v-if' to check if it's loading. But as we can see, the variable 'isLoading' is assigned to 'true' and is not being reassigned, that's the next step.

mounted() {
    setTimeout(() => {
      this.isLoading = false;
    }, 1500);
  }

Adding this mounted method is going to allow us to display our GIF for a certain amount of time, in this case is 1500 milliseconds, or 1,5 seconds. We can change this value as we want. What the 'setTimeout' method is doing, is setting our 'isLoading' variable to false once the time has passed, so the GIF disappear and we can finally see our webpage (in this case, a simple 'Hello World!'). This is how it looks:

Simple, and easy to implement.

Of course this isn't ideal for a real project, but if we are in a hurry and need to show our webpage to a client, this can save us a lot of sweating. Hope you liked it!