How to Create a Loading Spinner in Angular
Regular multi-page web applications have the built-in browser loading indicators next to the browser tabs. However, Single Page Applications (SPA) such as applications built using Angular are notorious for not showing any sort of loading indicators to the users. The user often has no idea that the page is loading data or performing a query, then all of a sudden the data on the page changes. We had some clients who hired professional software developers to build Angular applications for them, and their applications had no loading spinners which in turn lead to poor user experience and complaints. That is why we are going to talk about how to create a loading spinner in Angular.
Setting Up the Project
For this article, we are going to create a simple app that is going to have only one page where it is going to show a list of books. We are going emulate making an API call that takes a few seconds to complete for demonstrating our loading spinner.
We are going to create a spinner that will look like in the video below. It is going to show the spinner while it is loading the data needed to show in the page.
Creating the Loading Spinner
Let’s start from creating an Angular component called LoadingSpinnerComponent. We will place it in a folder called loading-spinner. Her is the content of LoadingSpinnerComponent:
As you can see from the screenshot above, our spinner component doesn’t have much code. The @Component Typescript decorator specifies that the HTML selector for that component is going to be loading-spinner, the HTML file name is loading-spinner.component.html, and it has a CSS file called loading-spinner.component.css.
Creating a loading spinner is easy. One of the easiest way is to use a GIF image. However, if you use a GIF image, the browser has to download the image, so the users may briefly see a blank screen the first time it shows the spinner. Fortunately, you can create a loading spinner with pure CSS. That way the browser will download the spinner code along with other CSS in the website. There are many online tools that you can use to find a pure CSS loading spinner. For instance, the https://loading.io/css website has some really nice free CSS loading spinners that you can use out of the box. So let’s head to https://loading.io/css and pick a spinner for our project. I like the spinner highlighted below, but you can use any of the free ones or sign up for a paid plan and use a fancier animation.
Next, you click on the spinner you like. It will pop up a new window where it will show the CSS and HTML needed for creating that spinner.
Let’s copy the CSS code into our loading-spinner.component.css file:
Please note that the original CSS from https://loading.io/css used white color for the spinner, so I changed the CSS to use a blue color that would look better in our demo site. The color of the spinner is controlled by the CSS color properties on line 14 and 15 from the screenshot above.
Now, let’s copy the HTML code into our loading-spinner.component.html file I also added a paragraph that says, “Loading, please wait..” to make it more appealing:
You might have noticed that on line 1 of the screenshot above, the div element has a CSS class called spinner-container. The reason why I added that spinner-container CSS class is to center the spinner horizontally and vertically and cover the entire screen with it. So when the spinner is shown, the user sees only the spinner like in the screenshot below:
The image below shows the styles of the loading-spinner CSS class. The display: flex, flex-direction: column, justify-content: center, and align-items: center properties move the spinner in the center of the screen. The position: fixed property makes sure that when the user scrolls the page up and down, the spinner scrolls with the page covering the entire screen. Finally, the left: 0, right: 0, top: 0, and bottom: 0 styles make the spinner be big enough to cover the entire screen.
Using the Loading Spinner
We created the component for our loading spinner. Now, it’s time to use it somewhere. Let’s create a page where we are going to show a list of books where we will show our loading spinner when we make an endpoint call. We will show the spinner while waiting for the endpoint to return data. When the endpoint returns the data, we will hide the spinner.
First, let’s create a service called BookService that will have a function called getAllBooks that will return the list of books needed for our page. We will just emulate an endpoint call using the RxJS delay (https://rxjs.dev/api/operators/delay) operator. We will make it wait 2 seconds to emulate an endpoint call long enough to see our loading spinner. Here is the code for the BookService class:
Our list of books is going be displayed in AppComponent which is the base component of our Angular application. We will add an ngOnInit function to the AppComponent class where we will load the list of books.
In the screenshot above, before making the endpoint call to get the list of books in the ngOnInit function, we show the loading spinner, and when the endpoint returns data, we hide the spinner. The spinner visibility is controlled by the isLoading boolean property. When the isLoading property value is true, the spinner is visible, when its value is false, the spinner is hidden. The try/finally blocks are crucial here. We set the isLoading property value to true in the try block, then set its value back to false in the finally block. The reason why we set the isLoading property value to false in the finally block is to hide the spinner in any case when the operation for getting the list of books finishes even if the endpoint call to get the books fails. If we didn’t have the try/finally blocks, and the endpoint call to get the list of books failed, the page would stuck in showing the loading spinner state which would result to bad UX. The loading spinner should be hidden if the endpoint for getting books raises an error. It is also crucial to use a JavaScript Promise with async/await pattern for this approach to work. The await keyword tells the browser to not move to the next line (the line that sets isLoading to false) until we receive data from the getAllBooks function call. That is the reason why we convert the RxJS Observable to Promise by calling the toPromise function.
Finally, let look at the HTML code where we show the loading spinner when we are calling the endpoint to get the list of books.
Our custom loading-spinner component is used on the line 2 in the screenshot above. We use the isLoading property in *ngIf to show the loading spinner when the isLoading property value is true. When the isLoading property value becomes false, the spinner is simply removed from the page.
Conclusion
It’s easy to create a loading spinner. Angular applications make a lot of HTTP requests in many pages, so adding a loading spinner can significantly improve the user experience (UX) of the application. Creating and using a loading spinner involves the following steps.
- Using a pure CSS loading spinner code that can be found in the internet.
- Creating an Angular component that will have the loading spinner HTML, CSS, and Typescript code.
- Showing the loading spinner before HTTP requests.
- Hiding the loading spinner after HTTP requests.
You can follow the steps listed above to create your own custom loading spinner. However, to save you time, we created an Angular spinner package that you can download from NPM and use for free. Please click the link below to navigate to our ngx-loading-spinner NPM package:
https://www.npmjs.com/package/@developer-partners/ngx-loading-spinner
Author:
Hayk Shirinyan
LinkedIn: https://www.linkedin.com/in/hayk-shirinyan-92980b59/
