Angular Application Loader Animation Styling

Angular Startup Loader Animation Screen

1. Introduction

In this article, we will learn how to show loader animation while Angular application startup. We will use CSS styling that would only apply to our application loader page.

2. Requirement

While loading Angular applications by default it shows a blank page. The load time depends on the size of the application along with dependencies. It is better to show some loader animation to users if startup takes a long time on slow networks otherwise, some of the audience may close the session by thinking the application is broken or under process.

In our example, we will edit the default index.html file that serves a blank page and applies CSS styling to show animation until application startup completes. Let’s see how it looks:

Angular Startup Loader Screen
Angular startup loader animation screen

3. Setup

Let’s use Angular CLI to generate a new project. To build our sample application, we used Angular CLI 6 to create the Angular project.

4. Prepare Loader Screen Styling

Let’s create the required CSS classes we need to show the loader animation.

app-root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: white;
  text-transform: uppercase;
  font-family: -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Oxygen-Sans,
  Ubuntu,
  Cantarell,
  Helvetica,
  sans-serif;
  font-size: 2.5em;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

body {
  background: #041e42;
  margin: 0;
  padding: 0;
}

@keyframes dots {
  50% {
    transform: translateY(-.4rem);
  }
  100% {
    transform: translateY(0);
  }
}

.dot-1 {
  animation: dots 1.5s ease-out infinite;
}

.dot-2 {
  animation-delay: .5s;
}

.dot-3 {
  animation-delay: 1s;
}

There are different ways we can add loader CSS to the Angular application. We can create a new stylesheet file or another approach is to create a new inline CSS under index.html. In our sample project, we are appending loader styling to index.html.

Next, we need to include loader animation CSS classes under <app-root> tag. Let’s append the required tags and label.

<app-root>
....
Loading
<span class="dot-1">.</span>
<span class="dot-1 dot-2">.</span>
<span class="dot-1 dot-3">.</span>
</app-root>

Now, we are ready to launch the Angular application with a nice application startup loader screen. Let’s start the application and you will see a loader animation at the center of the web page.

In case your application loads fast and you are not able to see the loading screen use F12 and try to configure your browser to perform slowly by changing Network type. In my case, I tested using Google Chrome.

5. Conclusion

In the above article, we learned how to efficiently apply loader animation while Angular application startup. We applied CSS that only applied to loader page.

As always the full source of the sample project can be found over on GitHub.

Leave a Reply

Your email address will not be published. Required fields are marked *