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

Walkthrough: Building An Angular App Using Tailwind CSS and Nx

In this video, we will cover a walk-through from scratch covering how to Build and Angular app using Tailwind CSS and Nx including Angular standalone components. 🖌 Tailwind CSS setup and usage⚙️ Nx monorepo configuration🧍‍♂️ Standalone components✅ Building a complete app in less than 2 hours with best practices ⏳ Timestamps:0:00 – Intro1:00 – Tailwind

Read More »

18 Performance Optimization Techniques For Angular Applications (podcast with Michael Hladky)

Performance is extremely important in front-end applications as they directly impact the application’s user experience. Poorly performing applications can be frustrating for the end-users. For example, an e-commerce site that is slow and unresponsive might deter users which could have a direct impact on the business.  Although there is a growing number of tools to

Read More »

Announcement: Angular Testing Workshop

I’m announcing a new live workshop: Angular Testing Workshop. It will be half-day workshops over three days, 100% online, where we will learn all the industry best practices with Angular testing so you can apply them in your daily work – taking straight out of my experience with doing Angular testing for big projects. The

Read More »

Server-side Rendering (SSR) with Angular Universal

As the name suggests, Single-page App (SPA) is a single HTML document that can be initially served to the client. Any new views required in the application can be created by using JavaScript solely on the client. Besides this, the request-response cycle still happens, but only to RESTful APIs to get static resources or images.

Read More »

How Fabrice Became An Angular Architect In 8 Weeks

Learn how Fabrice became an Angular architect in 8 weeks. He asked himself “How can I strengthen my knowledge” and he joined Angular Architect Accelerator. Fabrice shares his experience with the course and how he became a better Angular developer. Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Read More »