React Spinners CSS Loaders (React, Vue, Angular)

This library requires the .NET 7 SDK.

Amazing collection of Blazor spinners components with pure css.
The Blazor spinners are based on loading.io and from all over the web.
If you want to add your own spinner, please follow the contributing guidelines.

• 💅No extra CSS imports
• ✂️Zero dependencies

🚀 List of Spinners - Parameters and their types

The following components accept a Color parameter, and few also accept a Size parameter.
The default Color parameter is #7f58af.
Components that accept Size parameter have a default size in pixel.

Spinner	Color: string	Size: int
<Circle/>	#7f58af	64
<Default/>	#7f58af	80
<Ellipsis/>	#7f58af	80
<DualRing/>	#7f58af	80
<Facebook/>	#7f58af	80
<Grid/>	#7f58af	80
<Heart/>	#7f58af	80
<Hourglass/>	#7f58af	32
<Ring/>	#7f58af	80
<Ripple/>	#7f58af	80
<Roller/>	#7f58af	-
<Spinner/>	#7f58af	-
<Orbitals/>	#7f58af	-
<Ouroboro/>	#7f58af	-
<Ball/>	#7f58af	80
<CubeGrid/>	#7f58af	80

The following components accept three parameters, PrimaryColor, SecondaryColor, and a Size parameter. The default PrimaryColor and SecondaryColor parameter values are #7f58af and #88AF58 respectively. Components that accept Size parameter have a default size in pixel.

Spinner	PrimaryColor: string	SecondaryColor: string	Size: int
<Disk/>	#7f58af	#FC94AF	80
<DualBall/>	#7f58af	#FC94AF	80
<PivotBall/>	#7f58af	#FC94AF	80

Add the package to your application using dotnet cli

  dotnet add package blazor-css-spinner --version 1.0.2

using dotnet CLI

Usage Examples

<Circle /> @default color is #7f58af@
<Circle Color="red" />
<Circle Color="#be97e8" Size=200 /> @size parameter is int in pixel@
<Heart Color=GetRandomColor() />

@code
{
    string GetRandomColor() => "red";
}