Michael Washington's Blog, page 8

A Nicer Looking Blazor Loading Page

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:

http://tobiasahlin.com/spinkit/

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).

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

More ...Tags: Blazor

Retrieving Pop3 Emails Using Azure Functions

You can create an automated Azure function that will retrieve emails from a Pop3 email account and store the list of the emails in an Azure storage Table and the emails themselves as Azure storage Blobs…

Tags: Azure Functions

Turbocharging Your Angular 4+ Development Using Typewriter

Using the open source Typewriter plug-in with Visual Studio will allow you to automate much of the boilerplate code for your classes and services…

Tags: Angular 4

An Angular 4 .Net Core 2.0 Example With Application Shell and Authentication

You can easily create an Angular 4 application using Microsoft .Net Core 2.0 that has an application menu shell and authentication. This example also uses the open source component, PrimeNG…

Tags: Angular 4

Using Observables To Communicate Between Angular Components

You can use BehaviorSubject to facilitate communication between Angular components…

Tags: Angular 4

Create Your Own Angular 4 Application Shell Using PrimeNG

You can easily create an Angular 4 application shell using PrimeNG…

Tags: Angular 4

An Angular 4 .Net Core Application Updater

You can allow your application end users to fully update their version of your application by simply uploading a .zip file…

Tags: Angular 4

A .Net Core Angular 4 File Manager Using PrimeNG

You can easily implement a full multi-file upload and management in a .Net Core C# Angular 4+ application using PrimeNG FileUpload…

Tags: Angular 4

Auto-generating Angular 4 Pages and Creating Custom Components Using Radzen

Radzen has some additional features that bring it closer to the features that long time users of Visual Studio LightSwitch are used to. Namely, the page creation wizard, the ability to edit the source code using Visual Studio, and the ability to create custom components…

Tags: Radzen

Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+

Upgrading an Angular 2 JavaScriptServices project that uses PrimeNG to Angular 4+ is quite straightforward with a few gotcha’s…

Tags: Angular 4