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.

You can get to Tobias Ahlin’s SpinKit at this link:

http://tobiasahlin.com/spinkit/

Navigate to the page, use the right and left arrows to navigate to the animation you want and then click the Source link.

It will display the HTML and the CSS that you need.

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…

 

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:

 

Links

SpinKit

http://tobiasahlin.com/spinkit/

SpinKit on GitHub

https://github.com/tobiasahlin/SpinKit