erotik film
bodyheat full moves www xxx kajal video la figa che sborra ver video de sexo porno
Luxury replica watches
sex
asyabahis
escort antalya

** THIS SITE IS AN ARCHIVE ** - New Content is at:
BlazorHelpWebsite.com

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:
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation