10/14/2018 Admin

A Nicer Looking Blazor Loading Page


image

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

An error has occurred. This application may no longer respond until reloaded. Reload 🗙