https://github.com/ayodejii/blazor-spinner-css
Amazing collection of Blazor Server and Web Assembly spinners components with pure css.
https://github.com/ayodejii/blazor-spinner-css
blazor blazor-server blazor-webassembly component csharp css frontend-web loader loading
Last synced: 6 months ago
JSON representation
Amazing collection of Blazor Server and Web Assembly spinners components with pure css.
- Host: GitHub
- URL: https://github.com/ayodejii/blazor-spinner-css
- Owner: ayodejii
- License: mit
- Created: 2023-01-07T08:43:16.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-12T05:59:28.000Z (over 2 years ago)
- Last Synced: 2025-11-27T13:17:43.008Z (7 months ago)
- Topics: blazor, blazor-server, blazor-webassembly, component, csharp, css, frontend-web, loader, loading
- Language: CSS
- Homepage:
- Size: 268 KB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# React Spinners CSS Loaders ([React](https://github.com/JoshK2/react-spinners-css), [Vue](https://github.com/JoshK2/vue-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))
[](https://www.nuget.org/packages/blazor-css-spinner)
[](https://www.nuget.org/packages/blazor-css-spinner)
> This library requires the .NET 7 SDK.
Amazing collection of Blazor spinners components with pure css.
The Blazor spinners are based on [loading.io](loading.io) and from all over the web.
If you want to add your own spinner, please follow the [contributing guidelines](CONTRIBUTING.md).
- 💅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 |
|----------------| ------------- | ------------ |
| `` | `#7f58af` | `64` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | `32` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | `80` |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | - |
| `` | `#7f58af` | `80` |
| `` | `#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 |
|----------------|----------------------|------------------------|-----------|
| `` | `#7f58af` | `#FC94AF` | `80` |
| `` | `#7f58af` | `#FC94AF` | `80` |
| `` | `#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
```
@default color is #7f58af@
@size parameter is int in pixel@
@code
{
string GetRandomColor() => "red";
}
```