williampepple1 / blazor-spinner-css

Amazing collection of Blazor Server and Web Assembly spinners components with pure css.

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

Each component accepts a Color parameter, and few accepts also Size parameter.
The default Color parameter is #7f58af.
Component that accepts 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	-

Add the package to your application using

  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";
}