/blazor-spinner-css

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

Primary LanguageCSSMIT LicenseMIT

React Spinners CSS Loaders (React, Vue, Angular)

Nuget version Nuget Downloads

blazor_css_updated

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