Creating Preloader In Angular2 app

Current Challenge

Many sites and webapps have some cool animation that plays before all the site resources (like css, scripts and other stuff) fully loaded.
You see this cool animation (or progress bar) playing for some time and then all the site elements appear.(Instead of staring in some blank page)

In this post i decided to find out how to create such animation in my angular2 experimental site.

Preloader animations

First of all - for making some animation you must create a proper CSS code. Since i have no time and talent to make this CSS by myself, i made a shortcut and used this cool css preloaders site for taking CSS of one of its awesome animations.

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

HTML element

To make this animation to work we need to put its "spinner" class on some html element that will appear on the view before main application component loaded and will disappear immediately afterwise.
To achieve this effect we can put this element inside the main component tag, so after its contents will load - the inner element will be simply overriden

    <my-app>
      <div class="spinner"></div>
    </my-app>

Thats it - we achieved our goal without writing even single angular2 line! It little bit disappointing but it also good practice to do things as simple as possible

Here is running code: Hope you have fun reading...