VueJS Loading Icon

How to display a loading icon in VueJS

You may come across a moment where your application makes a request to the server or a remote API. That remote API might take some time to reticulate all the splines before it sends back a response. You can simply leave your app users wondering, or you can clue them into something happening.

Let’s take a look at the easiest way to display a loading icon in a VueJS application

Setup

For this example we are simply going to focus on a single file component. That single file component will make an HTTP get request to an API, and we want it to display a loading icon, preferably spinning, while we wait to render the response.

We are going to use the Axios library to make our request, and Bulma for styling. Finally, We’ll use Font Awesome for the spinning icon

If you feel like following along, you can simply create a Codepen VueJS project, or fork my easy start Vuejs Pen. It comes pre-loaded with the Vue library, Axios, Font Awesome and Bulma CSS framework. This kitten purrs.

https://codepen.io/pastranastevenaz/pen/rPXoyM

</meow>

The Component

Here is the script. We will go over what it’s doing after.

<html>
<head></head>
<body>


<div class="container" id="app">
  <div class="section">
    <h3 class="title is-3">Members</h3><br>
    <div id="loading" v-if="status === 'loading'">
      <div class="fa-3x">
        <i class="fas fa-spinner fa-spin"></i>
      </div>
    </div>
    <div id="loaded" v-if="status === 'loaded'"> 
      <ul>
        <li v-for="user in users">
          <b>Name: </b>{{ user.name }} <b>Email: </b {{user.email}}
        </li>
      </ul>
    </div>
      <button v-on:click="handleButtonPress">
        Show Users
      </button>
  </div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: function (){
      return{
        message: 'Hello Vue!'
      }
    },
    methods: {
      handleButtonPress: function(){
        this.status = 'loading';
        axios.get('https://jsonplaceholder.typicode.com/users')
        .then(r => {this.users = r.data;})
         .then(this.status = 'loaded')
          }    
        }
      })
</script>
</body>
</html>

Code Review

I mentioned we are focusing on one file. For brevity and clarity, I did not show the CSS and JS imports. Don’t forget to bring those into your own project.

If we start from the top, in the template section, we notice there are two containing divs with some conditional rendering syntax

<div id="loading" v-if="status === 'loading'">

This, and it’s corresponding div section with loaded instead of loading will render to the screen depending on the value of the data property status. 

When we click the button in the template, notice it triggers a method call to handleButtonPress. This method initially sets the status value to loading, this displaying out loading icon. When the Axios promise returns some data, we then set the users Array to the data we get from the response, and finally set the status to loaded. This hides our spinner icon, and displays our user list.


We can tweak this to fit whatever need we may have. Take a look at some of Font Awesome’s other spinners

Don’t forget to comment on this recipe.


If you found this helpful, or just want to help us out, feel free to donate as little or as much as you’d like. Every little bit goes towards helping caffeine addicts in need.

1 thought on “VueJS Loading Icon

Leave a Reply

Your email address will not be published. Required fields are marked *