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;
}
}

Sub-properties

  • animation-name: declares the name of the @keyframes at-rule to manipulate.
  • animation-duration: the length of time it takes for an animation to complete one cycle.
  • animation-timing-function: establishes preset acceleration curves such as ease or linear.
  • animation-delay: the time between the element being loaded and the start of the animation sequence.
  • animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
  • animation-iteration-count: the number of times the animation should be performed.
  • animation-fill-mode: sets which values are applied before/after the animation.
  • animation-play-state: pause/play the animation.

 

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.