Blazor How To: Spinners


Using Spinners on a Blazor .razor page. Use of a Spinner library.

A typical snippet of code is used with Blazor Client pages to delay page rendering of elements that display data that needs to be sourced over Http from the server, until it is received:

@if (Status == "null")
{
    <p><em>Uploading...</em></p>
}
else{
    <p>@Status</p>
}

An alternative is to display a Spinner instead of the Uploading ... paragraph. These are typically a rotating set of dots in a circle or line. There is a good set of Spinners for Blazor available as a repository at BlazorPro.SpinKit on GitHub. There are 12 Spinners as below:

Spinners

Larger view of Spinners here

Usage

Largely taken from the repository ReadMe.

The Spinner package can be installed to a Blazor app using:

Install-Package BlazorPro.Spinkit

Then:

1. Add Imports

Add the following to your _Imports.razor

@using BlazorPro.Spinkit

2. Add a Spinner component (from the list above) eg:

@if (Status == "null")
{
    <Pulse />
}
else{
    <p>@Status</p>
}

3. Add a reference to the style sheet

Add the following line to the head tag of your _Host.cshtml (Blazor Server) or index.html (Blazor WebAssembly).

    <link href="_content/BlazorPro.Spinkit/spinkit.min.css" rel="stylesheet" />

Summary

These Spinners are simple to include and work well. Hats off to Ed Charbeneau. I came across Blazor Spinners in a presentation earlier in the year on Channel9.

Footnote:

Can’t show Blazor Spinners (with animation) here as these pages are generated using Jekyll which uses Markdown; not ASP.NET Core. So the animations above are an Animated Gif captured from a running Blazor app. I’ve blogged about this in my next post.

 TopicSubtopic
  Next: > Jekyll-Markdown
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor
<  Prev:   Blazor