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

Custom colorsNew

Combine contextual colors and custom CSS colors with Color.

Primary

Lavender

Accent

<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.Is4.OnTablet" Margin="Margin.Is3.FromBottom">
        <Paragraph>Primary</Paragraph>
        <SpinKit Type="SpinKitType.Chase" Color="Color.Primary" />
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.Is4.OnTablet" Margin="Margin.Is3.FromBottom">
        <Paragraph>Lavender</Paragraph>
        <SpinKit Type="SpinKitType.Chase" Color="@("#DBB5E6")" />
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.Is4.OnTablet" Margin="Margin.Is3.FromBottom">
        <Paragraph>Accent</Paragraph>
        <SpinKit Type="SpinKitType.Chase" Color="@CssColor.Variable( "--spinner-accent", "#0F766E" )" />
    </Column>
</Row>

API

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

<SpinKit />