#5 #12: v3.0.0 Customize Icon. Customize text.

BlazorSpinner/BlazorSpinner.csproj

@@ -10,10 +10,10 @@
   </ItemGroup>
 
   <PropertyGroup>
-    <Version>2.1.0</Version>
+    <Version>3.0.0</Version>
     <Authors>dahln</Authors>
-    <PackageReleaseNotes>v2.1.0: Add new 'Loading' text component</PackageReleaseNotes>
-    <Description>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.</Description>
+    <PackageReleaseNotes>v3.0.0: Customize loading icon and customize loading text.</PackageReleaseNotes>
+    <Description>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.</Description>
     <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
 	<License>https://github.com/dahln/blazorspinner/blob/master/LICENSE</License>
     <RepositoryUrl>https://github.com/dahln/blazorspinner</RepositoryUrl>

BlazorSpinner/Spinner.razor

@@ -17,26 +17,64 @@
         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;
+    }
 
 </style>
 @if (IsVisible)
 {
 
     <div class="loading-overlay">
         <div class="loading-container">
-
-           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="loading-icon" style="margin: auto; background: transparent; display: block; shape-rendering: auto;" width="153px" height="153px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-                <circle cx="50" cy="50" fill="none" stroke="white" stroke-width="10" r="36" stroke-dasharray="169.64600329384882 58.548667764616276">
-                    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="3.2258064516129035s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
-                </circle>
-                <!-- [ldio] generated by https://loading.io/ -->
-            </svg>
-
+            @if(Type == SpinnerType.Icon)
+            {
+                <div class="icon-container">
+                    @if(!string.IsNullOrEmpty(Icon))
+                    {
+                        <object type="image/svg+xml" class="icon" data="@Icon">SVG not supported</object>
+                    }
+                    else if(string.IsNullOrEmpty(Icon))
+                    {
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon" style="margin: auto; background: transparent; display: block; shape-rendering: auto;" width="153px" height="153px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+                            <circle cx="50" cy="50" fill="none" stroke="white" stroke-width="10" r="36" stroke-dasharray="169.64600329384882 58.548667764616276">
+                                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="3.2258064516129035s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+                            </circle>
+                            <!-- [ldio] generated by https://loading.io/ -->
+                        </svg>
+                    }
+                </div>
+            }
+            else if(Type == SpinnerType.Text)
+            {
+                <div class="text-container">@Text</div>
+            }
         </div>
     </div>
 }
 @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()
     {

BlazorSpinner/SpinnerType.cs

@@ -0,0 +1,5 @@
+public enum SpinnerType
+{
+    Icon = 1,
+    Text = 2
+}

Demo/Demo.csproj

@@ -7,9 +7,14 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="BlazorSpinner" Version="2.1.0" />
+    <!-- <PackageReference Include="BlazorSpinner" Version="2.1.0" /> -->
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.1" PrivateAssets="all" />
   </ItemGroup>
 
+  <ItemGroup>
+	  <ProjectReference Include="..\BlazorSpinner\BlazorSpinner.csproj" />
+	</ItemGroup>
+
+
 </Project>

Demo/Pages/Index.razor

@@ -1,11 +1,9 @@
 @page "/"
 @inject BlazorSpinner.SpinnerService _spinnerService
-@inject BlazorSpinner.LoadingService _loadingService
 
 <h1>BlazorSpinner Demo</h1>
 
 <input type="button" value="Start Loading Spinner (5 second demo)" class="btn btn-primary mt-2" @onclick="StartSpinner" />
-<input type="button" value="Start Loading Text (5 second demo)" class="btn btn-primary mt-2" @onclick="StartLoading" />
 
 <p>
     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();
-    }
 }

Demo/Program.cs

@@ -11,6 +11,5 @@
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
 builder.Services.AddScoped<SpinnerService>();
-builder.Services.AddScoped<LoadingService>();
 
 await builder.Build().RunAsync();

Demo/Shared/MainLayout.razor

@@ -1,7 +1,8 @@
 @inherits LayoutComponentBase
 
 <Spinner></Spinner>
-<Loading></Loading>
+@* <Spinner Type="@SpinnerType.Text" Text="Processing..."></Spinner> *@
+@* <Spinner Type="@SpinnerType.Icon" Icon="loading.svg"></Spinner> *@
 
 <div class="main">
     <div class="content px-4">

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<SpinnerService>();```" in your Program.cs file
-    - Or Add "```builder.Services.AddScoped<LoadingService>();```" in your Program.cs file
 4. Add "```<Spinner></Spinner>```" to your MainLayout.razor file
-    - Or Add "```<Loading></Loading>```" 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: 
+    ```
+    <Spinner Type="@SpinnerType.Icon" Icon="loading.svg"></Spinner>
+    ```
+
+
+# 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: 
+    ```
+    <Spinner Type="@SpinnerType.Text" Text="Processing...""></Spinner>
+    ```
+# 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/