Blazorise SpinKit component

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 _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" />

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" />

API

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`