Jan
11
Written by:
Michael Washington
1/11/2017 11:41 AM
You can easily make a nicer looking Angular 2 loading page by using Tobias Ahlin’s SpinKit.
![image image](/Portals/0/Blog/Files/1/3299/Windows-Live-Writer-A-Nicer-Looking-Angular-2-Loading-Page_A07F-image_04e779cc-521b-4b05-8ca5-6a83142a8d85.png)
You can get to Tobias Ahlin’s SpinKit at this link:
http://tobiasahlin.com/spinkit/
![image image](/Portals/0/Blog/Files/1/3299/Windows-Live-Writer-A-Nicer-Looking-Angular-2-Loading-Page_A07F-image_8e153fa1-c85b-4513-8fbd-29e5ab21b4e2.png)
Navigate to the page, use the right and left arrows to navigate to the animation you want and then click the Source link.
![image image](/Portals/0/Blog/Files/1/3299/Windows-Live-Writer-A-Nicer-Looking-Angular-2-Loading-Page_A07F-image_cfd421b6-ede5-4812-96b0-0daa4f119031.png)
It will display the HTML and the CSS that you need.
![](http://aiHelpWebsite.com/Images/LoadingAnimation_before.gif)
For example, in the code for: Tutorial: An End-To-End Angular 2 Application Using MVC 5 and OData 4, the loading screen shows a simple:
Loading…
![image image](/Portals/0/Blog/Files/1/3299/Windows-Live-Writer-A-Nicer-Looking-Angular-2-Loading-Page_A07F-image_455bbdbf-efce-4406-a58f-db7711623a21.png)
However, if we open up the Index.cshtml file and replace the <my-app>Loading…</my-app> with the following code:
<div class="row">
<div class="col-md-4">
<!-- Angular2 Code -->
<my-app>
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</my-app>
<!-- Angular2 Code -->
</div>
</div>
<style>
.spinner {
margin: 100px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1.0);
}
}
@@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
(note that because we are using MVC and this is in a .cshtml file, we have to replace every instance of “@” with two “@@”)
A nicer loading screen appears:
![](http://aiHelpWebsite.com/Images/LoadingAnimation_after.gif)
Links
SpinKit
http://tobiasahlin.com/spinkit/
SpinKit on GitHub
https://github.com/tobiasahlin/SpinKit