diff --git a/BlazorSpinner/BlazorSpinner.csproj b/BlazorSpinner/BlazorSpinner.csproj index 0998930..be5fbbc 100644 --- a/BlazorSpinner/BlazorSpinner.csproj +++ b/BlazorSpinner/BlazorSpinner.csproj @@ -10,10 +10,10 @@ - 2.1.0 + 3.0.0 dahln - v2.1.0: Add new 'Loading' text component - BlazorSpinner is a loading spinner that can be included in Blazor applications. It has a simple service that can be called to "show" or "hide" the spinner. + v3.0.0: Customize loading icon and customize loading text. + BlazorSpinner is a loading spinner that can be included in Blazor applications. It has a simple service that can be called to "show" or "hide" a loading icon or loading text. true https://github.com/dahln/blazorspinner/blob/master/LICENSE https://github.com/dahln/blazorspinner diff --git a/BlazorSpinner/Loading.razor b/BlazorSpinner/Loading.razor deleted file mode 100644 index fa9ce9d..0000000 --- a/BlazorSpinner/Loading.razor +++ /dev/null @@ -1,65 +0,0 @@ -@inject LoadingService _loadingService - - -@if (IsVisible) -{ - -
-
- -

Loading...

- -
-
-} -@code -{ - protected bool IsVisible { get; set; } - protected override void OnInitialized() - { - _loadingService.OnShow += ShowLoadingSpinner; - _loadingService.OnHide += HideLoadingSpinner; - } - - public void ShowLoadingSpinner() - { - IsVisible = true; - if (IsVisible == true) - StateHasChanged(); - } - - async public void HideLoadingSpinner() - { - IsVisible = false; - await Task.Delay(500); - - if (IsVisible == false) - StateHasChanged(); - } -} \ No newline at end of file diff --git a/BlazorSpinner/LoadingService.cs b/BlazorSpinner/LoadingService.cs deleted file mode 100644 index 1f9be64..0000000 --- a/BlazorSpinner/LoadingService.cs +++ /dev/null @@ -1,26 +0,0 @@ -using System; -using System.Collections.Generic; -using System.Linq; -using System.Net.Http; -using System.Threading; -using System.Threading.Tasks; - -namespace BlazorSpinner -{ - public class LoadingService - { - public event Action OnShow; - public event Action OnHide; - - public void Show() - { - OnShow?.Invoke(); - } - - public void Hide() - { - OnHide?.Invoke(); - } - } -} - diff --git a/BlazorSpinner/Spinner.razor b/BlazorSpinner/Spinner.razor index 4e70f2c..ae1c119 100644 --- a/BlazorSpinner/Spinner.razor +++ b/BlazorSpinner/Spinner.razor @@ -17,6 +17,20 @@ width: 100%; height: 100%; } + .icon-container { + text-align: center; + margin-top: 200px; + } + .text-container { + color: white; + text-align: center; + font-size: 2em; + font-weight: 100; + margin-top: 200px; + } + .icon { + max-width: 120px; + } @if (IsVisible) @@ -24,19 +38,43 @@
- - - - - - - - + @if(Type == SpinnerType.Icon) + { +
+ @if(!string.IsNullOrEmpty(Icon)) + { + SVG not supported + } + else if(string.IsNullOrEmpty(Icon)) + { + + + + + + + } +
+ } + else if(Type == SpinnerType.Text) + { +
@Text
+ }
} @code { + + [Parameter] + public SpinnerType Type { get; set; } = SpinnerType.Icon; + + [Parameter] + public string Icon { get; set; } + + [Parameter] + public string Text { get; set; } = "Loading..."; + protected bool IsVisible { get; set; } protected override void OnInitialized() { diff --git a/BlazorSpinner/SpinnerType.cs b/BlazorSpinner/SpinnerType.cs new file mode 100644 index 0000000..73aa543 --- /dev/null +++ b/BlazorSpinner/SpinnerType.cs @@ -0,0 +1,5 @@ +public enum SpinnerType +{ + Icon = 1, + Text = 2 +} \ No newline at end of file diff --git a/Demo/Demo.csproj b/Demo/Demo.csproj index 4c6ff0e..b6c8b27 100644 --- a/Demo/Demo.csproj +++ b/Demo/Demo.csproj @@ -7,9 +7,14 @@ - + + + + + + diff --git a/Demo/Pages/Index.razor b/Demo/Pages/Index.razor index c2d9209..154a828 100644 --- a/Demo/Pages/Index.razor +++ b/Demo/Pages/Index.razor @@ -1,11 +1,9 @@ @page "/" @inject BlazorSpinner.SpinnerService _spinnerService -@inject BlazorSpinner.LoadingService _loadingService

BlazorSpinner Demo

-

A normal usage of this loader would involve calling .Show() at the beginning of an API (or other potential long running task). @@ -28,13 +26,4 @@ _spinnerService.Hide(); } - - async public Task StartLoading() - { - _loadingService.Show(); - - await Task.Delay(5000); - - _loadingService.Hide(); - } } \ No newline at end of file diff --git a/Demo/Program.cs b/Demo/Program.cs index c031e14..f2c835b 100644 --- a/Demo/Program.cs +++ b/Demo/Program.cs @@ -11,6 +11,5 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); builder.Services.AddScoped(); -builder.Services.AddScoped(); await builder.Build().RunAsync(); diff --git a/Demo/Shared/MainLayout.razor b/Demo/Shared/MainLayout.razor index 67658d2..14a0c0f 100644 --- a/Demo/Shared/MainLayout.razor +++ b/Demo/Shared/MainLayout.razor @@ -1,7 +1,8 @@ @inherits LayoutComponentBase - +@* *@ +@* *@

diff --git a/Demo/wwwroot/loading.svg b/Demo/wwwroot/loading.svg new file mode 100644 index 0000000..93045f3 --- /dev/null +++ b/Demo/wwwroot/loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/README.md b/README.md index 45a5854..09a6ff7 100644 --- a/README.md +++ b/README.md @@ -10,23 +10,42 @@ BlazorSpinner is a loading spinner that can be included in Blazor applications. Demo link: https://red-bay-06d0ccf10.1.azurestaticapps.net This is a screen shot of the spinner -![Screen Shot](https://github.com/dahln/blazorspinner/blob/master/BlazorSpinnerScreenShot.png) +![Screen Shot](https://raw.githubusercontent.com/dahln/BlazorSpinner/master/BlazorSpinnerScreenShot.png) -# Setup +# Basic Setup +Review the demo project for details on how to implement the spinner. 1. Install the library from Nuget: https://www.nuget.org/packages/BlazorSpinner/ 2. Add "```@using BlazorSpinner```" in your _Imports.razor 3. Add "```builder.Services.AddScoped();```" in your Program.cs file - - Or Add "```builder.Services.AddScoped();```" in your Program.cs file 4. Add "``````" to your MainLayout.razor file - - Or Add "``````" to your MainLayout.razor file 5. On any page you want to call the spinner from, inject the SpinnerService into it: ```@inject BlazorSpinner.SpinnerService _spinnerService``` - - Or Add ```@inject BlazorSpinner.LoadingService _loadingService``` - - (NOTE: You can also do this in other service to, just inject it via the constructor) 6. Call ```_spinnerService.Show()``` or ```_spinnerService.Hide()``` to "Show" or "Hide" the spinner. - - If you are using the text loading spinner, adjust this call to use the _loadingService. Call the spinner on any long-running calls or processes (such as API calls). -# Credit -BlazorSpinner uses an icon (https://fontawesome.com/icons/circle-notch?style=solid) from FontAwesome. SVG is directly embedded in this library. Height, Width, Color are modified. For more details, please refer to the license at FontAwesome: https://fontawesome.com/license +# Customizing Loading Icon +You can use your own SVG for the loading icon, instead of the default spinner. +1. Copy your SVG file into the 'wwwroot' of your application. +2. In the MainLayout.razor, set the 'Type' parameter to 'SpinnerType.Icon' for the Spinner component. +3. In the MainLayout.razor, set the 'Icon' parameter to the path to your SVG file. +4. Example: + ``` + + ``` + + +# Customizing Loading Text +You can use your own SVG for the loading icon, instead of the default spinner. +1. In the MainLayout.razor, set the 'Type' parameter to 'SpinnerType.Text' for the Spinner component. +3. In the MainLayout.razor, set the 'Text' parameter to the text you want +4. Example: + ``` + + ``` +# v2 => v3 Breaking Changes +The 'Loading' component and service have been merged with the 'Spinner' componet and service. Applications that have previously used the 'Loading' component and service need to be updated to use the 'Spinner' component and service. + + +# Icon Source +- https://loading.io/