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.

dotnet add 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

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<SpinKit />