Skip to content

feat: introduced animated loaders #1286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
olufemioyedepo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: introduced animated loaders #1286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Preload/PreloadDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
27 changes: 27 additions & 0 deletions ...p.Demo.RCL/Components/Pages/Demos/Preload/Preload_Demo_04_Animated_Loading_Spinners.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
}
215 changes: 203 additions & 12 deletions blazorbootstrap/Components/Preload/Preload.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
20 changes: 17 additions & 3 deletions blazorbootstrap/Components/Preload/Preload.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ public partial class Preload : BlazorBootstrapComponentBase
private bool showBackdrop;

private string? spinnerColor;

private string? spinnerType;
private string? animatedLoaderPrimaryColor;
#endregion

#region Methods
Expand Down Expand Up @@ -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();
}

Expand Down Expand Up @@ -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
}
4 changes: 4 additions & 0 deletions blazorbootstrap/Constants/StringConstants.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
14 changes: 14 additions & 0 deletions blazorbootstrap/Extensions/EnumExtensions.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
4 changes: 2 additions & 2 deletions blazorbootstrap/Services/PreloadService.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
}