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

When you buy this book you support this site! - Thank You for your support!

Oct 14

Written by: Michael Washington
10/14/2018 1:11 PM  RssIcon

image

I covered this previously with Angular. Basically the Blazor template creates a page that looks like this when loading…

image

You may prefer something like this:

image

You can easily make a nicer looking 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.

Update The Blazor Application

image

Now, open the index.html page (under wwwroot).

Replace:

 

<app>Loading...</app>

 

with the code from SpinKit, for example with the following:

 

    <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>
    </app>
    <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>

 

Links

SpinKit

http://tobiasahlin.com/spinkit/

SpinKit on GitHub

https://github.com/tobiasahlin/SpinKit

Tags: Blazor
Categories:

4 comment(s) so far...


Gravatar

Herr

Hi i have a short question.

i tried to replace the Loading ... Message as you described.
But the background color of the Loading Screen and the color of the rotating spinner didn't change.
I use version 0.6 of blazor.
Do you have any idea what I'm doing wrong?
I took the css from the spinkit site and put it in a section below the app tag.
I also tried to put in in the css file of the project but with no effect.

What version of blazor are you using and what have you changed in the css?
Do i have to replace something in the original css file?

With kind regards

Christian

By Dr. Christian Gill on   11/4/2018 2:08 PM
Gravatar

Re: A Nicer Looking Blazor Loading Page

@Dr. Christian Gill - I am using Blazor 0.6 and I only changed what I indicated In the article.

By Michael Washington on   10/23/2018 4:06 AM
Gravatar

Re: A Nicer Looking Blazor Loading Page

Hey Michael!

For those who are building Blazor Server-Side apps, what files should we change for this case?

Thanks in advance!

By Sérgio Rebelo on   5/4/2020 4:49 PM
Gravatar

Re: A Nicer Looking Blazor Loading Page

@Sérgio Rebelo - You would never need this for server side Blazor.

By Michael Washington on   5/4/2020 4:50 PM
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation