DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Display an animated loading icon with Vue.js
FlyNestor
FlyNestor

Posted on

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> 
Enter fullscreen mode Exit fullscreen mode

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)
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post