Display an animated loading icon with Vue.js

A throbber, also known as a loading icon, is an animated icon used to show that a software is performing an action in the background (such as downloading content or conducting intensive calculations).

To indicate to the user that the software is working in the background, you can easily put a throbber on a webpage.

With Font Awesome icons you can use the fa-spin class to make an icon rotates as a throbber.

Example of usage from my website Rollideo: On the home page the user can click on a button to generate a video from a text, then a throbber is displayed to indicate that a process is running in the back-end.

In the code bellow the throbber will be displayed if wait_video_generation equals true. On a side note, if you can evaluate the total duration of the the process it’s a good practice to display it to the user.

<div class="box" v-if="wait_video_generation">      
<font-awesome-icon icon="spinner" class="fa-spin" size="3x"  />
</div> 

wait_video_generation is set to false when the front-end gets the response from the back-end. Then the throbber is not displayed anymore.

axios.post(load_url,data, {
headers: {
'Content-Type': 'multipart/form-data'
}}
).then(response => {
...
this.wait_video_generation = false
}).catch(error => {
console.log(error)
})

Sometimes you need to disable an element when a process is running in the background, for example to avoid that the user clicks 10 times on the video generation button.

<button :disabled="wait_video_generation" class="button is-info" @click="createvideo">
Launch the video generation
</button>