How to use a loading animation in your Vue app

Why do we need loading animations?

Loading animations simply allow us to notify the users of an ongoing process(e.g. data retrieval, validation etc.)

You can build your own using HTML and CSS here's the link to a W3schools tutorial or you can visit Loading.io to see a lot of cool designs.

How do we use loaders in Vue

In this article we will set up a simple loader to run when we try to retrieve data from an API. To get started:

1. Set up a Vue project
Requirements for Vue CLI:

• Node
• An open command line terminal on your computer

To get started:
Install the Vue CLI to easily create a new Vue project from your terminal:

Once it has been installed, enter the code below to create a new vue project:

To see how to setup a Vue CLI project, click here

2. Set up a simple Vue file
The basic Vue SFC(Single File Component) has three sections
<template></template> - This holds your HTML
<script></script> - This holds your Javascript
<style></style> - This holds your css

Here is a sample Vue file:

3. Set up the HTML container for the data

4. Set up the CSS and layout for the container
I've set up a simple flexbox with centered content:

5. Setting up data retrieval and loading animation
We can have a sample loading animation here:
This is done in the JavaScript section and we will be using NBA boxscores. Here's how we'll do it:

• Create data object and set loading to true
• Add a method to get data to the methods list
• On created, fetch the data, append to the HTML component and set loading to false to disable loading animation

6. Finally reference the updated data in the HTML
All together now:

That's it! Now when you try to retrieve data from the endpoint, the loading animation will show first for better UX.