diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/PreloadDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/PreloadDocumentation.razor
index 9df788f1b..dfca9f928 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/PreloadDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/PreloadDocumentation.razor
@@ -41,6 +41,12 @@
     <Demo Type="typeof(Preload_Demo_03_Change_Spinner_Color)" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Non-Bootstrap Spinners" PageUrl="@pageUrl" Link="non-bootstrap-spinners">
+    <div class="mb-3">
+        Here's a growing collection of sleek, animated preloaders including dual rings, bouncing dots, wave bars, and more.
+    </div>
+    <Demo Type="typeof(Preload_Demo_04_Animated_Loading_Spinners)" />
+</Section>
 @code {
     private const string pageUrl = DemoRouteConstants.Demos_URL_Preload;
     private const string pageTitle = "Blazor Preload";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/Preload_Demo_04_Animated_Loading_Spinners.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/Preload_Demo_04_Animated_Loading_Spinners.razor
new file mode 100644
index 000000000..418036615
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/Preload_Demo_04_Animated_Loading_Spinners.razor
@@ -0,0 +1,27 @@
+<Button Color="ButtonColor.Primary" @onclick="async () => await ShowBarsProgressionLoader(SpinnerColor.Primary)">Show Bars Progression Loader</Button>
+<Button Color="ButtonColor.Success" @onclick="async () => await ShowBouncingDotsAnimationLoader(SpinnerColor.Success)">Show Bouncing Dots Loader</Button>
+<Button Color="ButtonColor.Info" @onclick="async () => await ShowPulseRingLoader(SpinnerColor.Info)">Show Pulse Ring Loader</Button>
+@code {
+    [Inject] protected PreloadService PreloadService { get; set; } = default!;
+
+    private async Task ShowBarsProgressionLoader(SpinnerColor spinnerColor)
+    {
+        PreloadService.Show(spinnerColor, "Loading data...", StringConstants.BarsProgressionLoader);
+        await Task.Delay(3000);
+        PreloadService.Hide();
+    }
+
+    private async Task ShowBouncingDotsAnimationLoader(SpinnerColor spinnerColor)
+    {
+        PreloadService.Show(spinnerColor, "Loading data...", StringConstants.BouncingDots);
+        await Task.Delay(3000);
+        PreloadService.Hide();
+    }
+
+    private async Task ShowPulseRingLoader(SpinnerColor spinnerColor)
+    {
+        PreloadService.Show(spinnerColor, "Loading data...", StringConstants.PulseRingLoader);
+        await Task.Delay(3000);
+        PreloadService.Hide();
+    }
+}
diff --git a/blazorbootstrap/Components/Preload/Preload.razor b/blazorbootstrap/Components/Preload/Preload.razor
index 82363c7b0..0459c54f0 100644
--- a/blazorbootstrap/Components/Preload/Preload.razor
+++ b/blazorbootstrap/Components/Preload/Preload.razor
@@ -11,20 +11,72 @@
                 }
                 else
                 {
-                    <div class="text-center @spinnerColor">
-                        <div class="spinner-border" role="status">
-                            <span class="visually-hidden">Loading...</span>
+                    @if (spinnerType == StringConstants.BouncingDots)
+                    {
+                        <div class="loading">
+                            <div class="boucingdots-spinner"><span></span><span></span><span></span><span></span><span></span></div>
+                            @if (!string.IsNullOrWhiteSpace(loadingText))
+                            {
+                                <div>@loadingText</div>
+                            }
+                            else if (!string.IsNullOrWhiteSpace(LoadingText))
+                            {
+                                <div>@LoadingText</div>
+                            }
                         </div>
-                        @if (!string.IsNullOrWhiteSpace(loadingText))
-                        {
-                            <div>@loadingText</div>
-                        }
-                        else if (!string.IsNullOrWhiteSpace(LoadingText))
-                        {
-                            <div>@LoadingText</div>
-                        }
-                    </div>
+                    }
+
+                    @if (spinnerType == StringConstants.BarsProgressionLoader)
+                    {
+                        <div class="loading">
+                            <div class="barsprogression-loader"><span></span><span></span><span></span><span></span><span></span></div>
+                            @if (!string.IsNullOrWhiteSpace(loadingText))
+                            {
+                                <div>@loadingText</div>
+                            }
+                            else if (!string.IsNullOrWhiteSpace(LoadingText))
+                            {
+                                <div>@LoadingText</div>
+                            }
+                        </div>
+                    }
+
+                    @if (spinnerType == StringConstants.PulseRingLoader)
+                    {
+                        <div class="loading">
+                            <div class="pulse"></div>
+                            @if (!string.IsNullOrWhiteSpace(loadingText))
+                            {
+                                <div>@loadingText</div>
+                            }
+                            else if (!string.IsNullOrWhiteSpace(LoadingText))
+                            {
+                                <div>@LoadingText</div>
+                            }
+                        </div>
+                    }
+
+                    @if (string.IsNullOrEmpty(spinnerType) || (spinnerType == StringConstants.DefaultBootstrapSpinner))
+                    {
+                        <div class="text-center @spinnerColor">
+                            <div class="spinner-border" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                            @if (!string.IsNullOrWhiteSpace(loadingText))
+                            {
+                                <div>@loadingText</div>
+                            }
+                            else if (!string.IsNullOrWhiteSpace(LoadingText))
+                            {
+                                <div>@LoadingText</div>
+                            }
+                        </div>
+                    }
+
                 }
+
+                
+                
             </div>
         </div>
     </div>
@@ -34,3 +86,142 @@
 {
     <div class="modal-backdrop modal-backdrop-page-loading fade show"></div>
 }
+
+
+
+<style>
+    .loading {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .barsprogression-loader {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 5px;
+            width: 80px;
+            height: 50px;
+
+            span {
+                display: block;
+                height: 5px;
+                width: 15px;
+                background-color: #ffffff;
+                animation: barsprogression-loader 1.5s infinite ease-in-out;
+
+                &:nth-of-type(2) {
+                    animation-delay: 0.2s;
+                }
+
+                &:nth-of-type(3) {
+                    animation-delay: 0.4s;
+                }
+
+                &:nth-of-type(4) {
+                    animation-delay: 0.6s;
+                }
+
+                &:last-of-type {
+                    animation-delay: 0.8s;
+                }
+            }
+        }
+
+        .boucingdots-spinner {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 5px;
+
+            span {
+                display: block;
+                height: 20px;
+                width: 20px;
+                border-radius: 50%;
+                background-color: @animatedLoaderPrimaryColor;
+                opacity: 0.5s;
+                animation: boucingdots-spinner 1.5s infinite ease-in-out;
+
+                &:nth-of-type(2) {
+                    animation-delay: 0.2s;
+                }
+
+                &:nth-of-type(3) {
+                    animation-delay: 0.4s;
+                }
+
+                &:nth-of-type(4) {
+                    animation-delay: 0.6s;
+                }
+
+                &:last-of-type {
+                    animation-delay: 0.8s;
+                }
+            }
+        }
+    }
+
+    @@keyframes barsprogression-loader {
+        0%, 50%, 100% {
+            height: 8px;
+            background-color: @animatedLoaderPrimaryColor;
+        }
+
+        25% {
+            height: 40px;
+            background-color: #ffffff;
+        }
+    }
+
+    @@keyframes boucingdots-spinner {
+        0%, 100% {
+            opacity: 0.3;
+            transform: translateY(0);
+            box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+        }
+
+        50% {
+            opacity: 1;
+            transform: translateY(-10px);
+            background-color: #ffffff;
+            box-shadow: 0 20px 3px rgba(0, 0, 0, 0.05);
+        }
+    }
+
+    .pulse {
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+      position: relative;
+    }
+
+    .pulse::before,
+    .pulse::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      border: 6px solid @animatedLoaderPrimaryColor;
+      animation: pulseRing 1.2s ease-out infinite;
+    }
+
+    .pulse::after {
+      animation-delay: 0.6s;
+      opacity: 0.5;
+    }
+
+    @@keyframes pulseRing {
+      0% {
+        transform: scale(0.3);
+        opacity: 0.9;
+      }
+      100% {
+        transform: scale(1.2);
+        opacity: 0;
+      }
+    }
+
+</style>
\ No newline at end of file
diff --git a/blazorbootstrap/Components/Preload/Preload.razor.cs b/blazorbootstrap/Components/Preload/Preload.razor.cs
index 5617e143b..f8412a2be 100644
--- a/blazorbootstrap/Components/Preload/Preload.razor.cs
+++ b/blazorbootstrap/Components/Preload/Preload.razor.cs
@@ -9,7 +9,8 @@ public partial class Preload : BlazorBootstrapComponentBase
     private bool showBackdrop;
 
     private string? spinnerColor;
-
+    private string? spinnerType;
+    private string? animatedLoaderPrimaryColor;
     #endregion
 
     #region Methods
@@ -39,14 +40,15 @@ private void OnHide()
         StateHasChanged();
     }
 
-    private void OnShow(SpinnerColor spinnerColor, string? loadingText)
+    private void OnShow(SpinnerColor spinnerColor, string? loadingText, string? spinnerType)
     {
         this.spinnerColor = spinnerColor.ToSpinnerColorClass();
+        this.animatedLoaderPrimaryColor = spinnerColor.ToHexColorCode();
 
         showBackdrop = true;
 
         this.loadingText = loadingText;
-
+        this.spinnerType = spinnerType;
         StateHasChanged();
     }
 
@@ -96,5 +98,17 @@ private void OnShow(SpinnerColor spinnerColor, string? loadingText)
     [Inject]
     private PreloadService PageLoadingService { get; set; } = default!;
 
+
+    /// <summary>
+    /// Gets or sets the spinner type.
+    /// <para>
+    /// Default value is <see langword="null"/>.
+    /// </para>
+    /// </summary>
+    [AddedVersion("1.10.4")]
+    [DefaultValue(StringConstants.DefaultBootstrapSpinner)]
+    [Description("Gets or sets the spinner type.")]
+    [Parameter]
+    public string? SpinnerType { get; set; }
     #endregion
 }
diff --git a/blazorbootstrap/Constants/StringConstants.cs b/blazorbootstrap/Constants/StringConstants.cs
index e6d6cbee8..d5f18b15b 100644
--- a/blazorbootstrap/Constants/StringConstants.cs
+++ b/blazorbootstrap/Constants/StringConstants.cs
@@ -36,5 +36,9 @@ public static class StringConstants
     public const string PropertyTypeNameGuidCSharpTypeKeyword = "Guid";
     public const string PropertyTypeNameObjectCSharpTypeKeyword = "object";
 
+    public const string BouncingDots = "BouncingDots";
+    public const string BarsProgressionLoader = "BarsProgressionLoader";
+    public const string DefaultBootstrapSpinner = "DefaultBootstrapSpinner";
+    public const string PulseRingLoader = "PulseRingLoader";
     #endregion
 }
diff --git a/blazorbootstrap/Extensions/EnumExtensions.cs b/blazorbootstrap/Extensions/EnumExtensions.cs
index d36cfec3a..37d4f642f 100644
--- a/blazorbootstrap/Extensions/EnumExtensions.cs
+++ b/blazorbootstrap/Extensions/EnumExtensions.cs
@@ -627,5 +627,19 @@ or ToastType.Info
             _ => ""
         };
 
+    public static string ToHexColorCode(this SpinnerColor spinnerColor) =>
+    spinnerColor switch
+    {
+        SpinnerColor.Primary => "#0d6efd",
+        SpinnerColor.Secondary => "#6c757d",
+        SpinnerColor.Success => "#198754",
+        SpinnerColor.Danger => "#dc3545",
+        SpinnerColor.Warning => "#ffc107",
+        SpinnerColor.Info => "#0dcaf0",
+        SpinnerColor.Light => "#f8f9fa",
+        SpinnerColor.Dark => "#212529",
+        _ => ""
+    };
+
     #endregion
 }
diff --git a/blazorbootstrap/Services/PreloadService.cs b/blazorbootstrap/Services/PreloadService.cs
index 72fa3a598..32ecaf8bb 100644
--- a/blazorbootstrap/Services/PreloadService.cs
+++ b/blazorbootstrap/Services/PreloadService.cs
@@ -5,7 +5,7 @@ public class PreloadService
     #region Events
 
     internal event Action OnHide = default!;
-    internal event Action<SpinnerColor, string?> OnShow = default!;
+    internal event Action<SpinnerColor, string?, string?> OnShow = default!;
 
     #endregion
 
@@ -25,7 +25,7 @@ public class PreloadService
     /// <param name="loadingText"></param>
     [AddedVersion("1.1.0")]
     [Description("Shows the preload spinner.")]
-    public void Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null) => OnShow?.Invoke(spinnerColor, loadingText);
+    public void Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null, string? loadingSpinner = null) => OnShow?.Invoke(spinnerColor, loadingText, loadingSpinner);
 
     #endregion
 }