Change the old “Loading…” text!

As my fellow Angular2 developers might be already knowing, when Angular calls the bootstrap function in main.ts, it reads the AppComponent metadata, finds the very first component custom meta selector, and renders the whole application’s view between those tags! This is quite cool but it also requires some text in most cases “Loading…” which is show while the app’s JS, CSS and other Views are loaded in the background.

Scroll down to view demo link or to download from Github.

To have a more well-designed approach we can have CSS do the job. The animation property in CSS can be used to animate CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes (at-rule) which are then called with the animation property, like so:

.element {
animation: pulse 5s infinite;
@keyframes pulse {
0% {
background-color: #001F3F;
100% {
background-color: #FF4136;




Combining this knowledge of CSS animation we can put some cool Loading spinners in our Angular2 app. Moreover, CSS can also be used to style and animate scalable vector graphics (SVG), much like it is used to style and animate HTML elements. We can have the same CSS animation property to animate SVG images and build a loading screen from it.


Download from GitHub


Contact Taksa for your Outsourcing Design Project requirements and see how our designers incorporate such extraordinary branding philosophy into your brand for great marketing success.