Jan 11

Written by: Michael Washington
1/11/2017 11:41 AM  RssIcon

image

You can easily make a nicer looking Angular 2 loading page by using Tobias Ahlin’s SpinKit.

image

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

http://tobiasahlin.com/spinkit/

image

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

image

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…

 

image

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

Tags:
Categories:

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation