The Four ways to Create Loading Spinners in an Angular App

Share on facebook
Share on google
Share on twitter
Share on linkedin

A core UX principle is that the user should get instant feedback about whatever happens in an application. This includes when people are waiting for stuff to load on a website. Going to a site and wait for several seconds (not all live in a first world country with fast internet) can be very confusing because the user is looking at a blank page and isn’t aware of if the page is broken or whether it eventually will load. For this reason, you should always illustrate loading with a loading spinner (or a loading illustration of your choice) to inform the user to…:

In this post, we are to explore four ways to implement spinners in an Angular application and when to use what.


Get the complete demo of how to implement these different spinners here:

1. way: The “before app loads” spinner

Angular applications can take a while to bootstrap, even with optimized technologies such as tree-shaking and bundle optimization. Especially if you are running init code in an app initializer, it can take considerable time before the application components are getting rendered.

For this reason, you should have a vanilla HTML and CSS version of your spinner getting shown upon app loading.

Creating the pre-Angular spinner

For showing a spinner before Angular has loaded we can write HTML inside the app-root tag Angular uses to bootstrap an Application:

The spinner is styled as:

And then the spinner style is added to the global styles.scss file which will make the style global accessible from our index.html file:

2. way: The spinner component

Sometimes you just want to show a spinner without any overlay. This can be just by creating a spinner component based on the previously designed spinner.

Creating the spinner component

This spinner is bootstrap based and is showing an animated spinner.

The spinner component template:

Spinner style is the same as for the pre-Angular spinner and gets imported even though it is in global scope, to make the dependency explicit:

Otherwise, global CSS can be a mess and in my opinion. Components should be self-reliant style-wise, except for something trivial such as the grid system.

3. way: The spinner overlay wrapper component

Sometimes you just want to add a spinner overlay over a specific part of the DOM and leave other parts, such as the navigation bar, clickable. This is done by creating an Angular wrapper component which will create an overlay over the inner HTML and show a spinner in the middle of the screen.

Creating the spinner overlay wrapper component

The spinner overlay wrapper component is used as a wrapper for the spinner and is wrapping other dom tags using ng-content for creating an overlay over these and show a spinner.

The spinner overlay wrapper style:

Voila! That’s all it takes.

4. way: The full-screen spinner overlay service

The spinner overlay service is creating an overlay which is making the screen unclickable. Depending on your needs you sometimes want to disable all interactions of the app, when it is loading, by creating a full-screen overlay.

Creating the spinner overlay service

The spinner overlay service is using the Angular CDK to spawn a new spinner overlay by creating a CDK Portal and attaching it to the CDK overlayref. This post won’t cover how the Angular CDK works, but in short, the Angular CDK is making it easy to show the SpinnerOverlayComponent by adding it to the bottom of the DOM, absolutely positioned.

The spinner overlay service is created like this:

The spinner overlay component is creating a full-screen overlay and wrapping the spinner component.

The styling:

Finally, the component being created dynamically as a CDK portal:

Note that this component needs to be added to the entryComponents property of the NgModule that declares this component for Angular to create it dynamically.

Hook into middleware

For avoiding manually coding every time the spinner overlay should be shown this can be hooked into middleware in Angular, such as an HTTP interceptor for showing loading spinner on HTTP request or a Redux store property eg. isLoading property.

Conclusion

In this post we went through four ways to create spinners in your Angular application: raw HTML and CSS pre-Angular spinner, spinner component, spinner overlay wrapper component and spinner CDK overlay service. All four spinners can make sense to use in the same project because they serve a different purpose. Depending on the desired timing and scope of the spinner you now know how to use the right spinner for the right job.

Get the complete demo of how to implement these different spinners here:

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

How to Set up a CI pipeline with Azure Pipelines and Nx

It goes without saying that having a CI pipeline for your Angular apps is a must. Setting one up for regular Angular apps is fairly straightforward but when you have an Nx monorepo there are certain other challenges that you have to overcome to successfully orchestrate a “build once, deploy many” pipeline. This post will

Read More »

How to Set Up Git Hooks in an Nx Repo

Git hooks can be used to automate tasks in your development workflow. The earlier a bug is discovered, the cheaper it is to fix (and the less impact it has). Therefore it can be helpful to run tasks such as linting, formatting, and tests when you are e.g. committing and pushing your code, so any

Read More »

The Stages of an Angular Architecture with Nx

Long gone are the times when the frontend was just a dumb static website. Frontend apps have gotten increasingly complex since the rise of single-page application frameworks like Angular. It comes with the price of increased complexity and the ever-changing frontend landscape requires you to have an architecture that allows you to scale and adapt

Read More »

The Best Way to Use Signals in Angular Apps

Since Angular 16, Angular now has experimental support for signals and there is a lot of confusion in the community about whether this is going to replace RxJS or how it should be used in an app in combination with RxJS. This blog post sheds some light on what I think is the best way

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »