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:

2 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

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