erotik film
bodyheat full moves www xxx kajal video la figa che sborra ver video de sexo porno
Luxury replica watches
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


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


You may prefer something like this:


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


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


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.

Update The Blazor Application


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





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


        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        .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);




SpinKit on GitHub

Tags: Blazor

4 comment(s) so far...



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


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

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

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

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