Blazorise SpinKit component

A component used to show loading indicators animated with CSS.



Install extension from NuGet.
Install-Package Blazorise.SpinKit


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

Static files

Include CSS link into your index.html or _Layout.cshtml / _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" />


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


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


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