Blazorise SpinKit component

Show lightweight, CSS-based loading indicators.

To use the SpinKit component, install the Blazorise.SpinKit package first.

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 a Blazorise color variant.

<SpinKit Type="SpinKitType.Plane" Color="Color.Success" />

Hex Color

The color can be changed with HEX value.

<SpinKit Type="SpinKitType.Plane" HexColor="#ff4a3d" />

Size

Size can be changed using predefined size variants.

<SpinKit Type="SpinKitType.Plane" Size="Size.Small" />

API

Parameters

Parameter	Description	Type	Default
`Centered`	Position the spinner to the center of it's container.	`bool`	`false`
`Color`	Gets or sets the spinner color variant.	`Color`	`Default`
`HexColor`	Gets or sets the spinner custom hex color that overrides the color variant.	`string`
`Size`	Gets or sets the spinner size. Possible values:`Default`, `ExtraSmall`, `Small`, `Medium`, `Large`, `ExtraLarge`	`Size`	`Default`
`Type`	Gets or sets the spinner type. Possible values:`Plane`, `Chase`, `Bounce`, `Wave`, `Pulse`, `Flow`, `Swing`, `Circle`, `CircleFade`, `Grid`, `Fold`, `Wander`	`SpinKitType`	`SpinKitType.Plane`