SpinKit

A component used to show loading indicators animated with CSS.

Installation

NuGet

Install extension from NuGet.
Install-Package Blazorise.SpinKit

Imports

In your main Imports.razor add:
@using Blazorise.SpinKit

Static files

Include CSS link into your index.html or _Host.cshtml file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
<link href="_content/Blazorise.SpinKit/blazorise.spinkit.css" rel="stylesheet" />

Basic example

A basic spinner with default settings.
<SpinKit Type="SpinKitType.Plane" />

Color

The color can be changed with HEX value.
<SpinKit Type="SpinKitType.Plane" Color="#ff4a3d" />

Size

Size can be changed using any unit type. In this example we’re using px.
<SpinKit Type="SpinKitType.Plane" Size="20px" />

Attributes

Name Description Type Default
Type Defines the spinner type. SpinKitType Plane
Color Defines the custom spinner color. string null
Size Defines the custom spinner size. string null
Centered Position the spinner to the center of its container. bool false