From 90560b40249fbfffbd128a43fbd824c9fe2822e1 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Fri, 28 Jul 2023 19:03:12 +0200 Subject: [PATCH 1/4] Update componente loading con stima fake --- EgwCoreLib.BlazorTest/Pages/TestLoading.razor | 14 ++ .../Pages/TestLoading.razor.cs | 58 +++++++ EgwCoreLib.Razor/ProgressDisplay.razor | 33 ++++ EgwCoreLib.Razor/ProgressDisplay.razor.cs | 157 ++++++++++++++++++ 4 files changed, 262 insertions(+) create mode 100644 EgwCoreLib.BlazorTest/Pages/TestLoading.razor create mode 100644 EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs create mode 100644 EgwCoreLib.Razor/ProgressDisplay.razor create mode 100644 EgwCoreLib.Razor/ProgressDisplay.razor.cs diff --git a/EgwCoreLib.BlazorTest/Pages/TestLoading.razor b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor new file mode 100644 index 0000000..51306b3 --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor @@ -0,0 +1,14 @@ +@page "/TestLoading" + +

TestLoading

+
+ + +
+
+ + +
+ + + diff --git a/EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs new file mode 100644 index 0000000..24296ba --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs @@ -0,0 +1,58 @@ +namespace EgwCoreLib.BlazorTest.Pages +{ + public partial class TestLoading + { + #region Protected Properties + + protected double expTime { get; set; } = 20; + protected int numSteps { get; set; } = 4; + + #endregion Protected Properties + + #region Protected Methods + + protected async Task StartLongTimer() + { + double stdWait = expTime / numSteps; + int nextWait = 1000; + int stepVal = maxVal / numSteps; + // imposto i valori x progress.. + maxVal = 100; + expTimeMSec = stdWait * 1000; + //nextVal = stepVal; + //currVal = 0; + for (int currStep = 1; currStep <= numSteps; currStep++) + { + //await Task.Delay(1); + // aggiorno valori + currVal = (currStep - 1) * stepVal; + nextVal = currStep * stepVal; + // se max mi fermo... + if (nextVal > maxVal) + { + nextVal = maxVal; + } + await InvokeAsync(StateHasChanged); + nextWait = (int)(rnd.Next(2000, 2500) * stdWait); + // attendo step successivi... + await Task.Delay(nextWait); + } + await Task.Delay(1); + currVal = maxVal; + await InvokeAsync(StateHasChanged); + } + + #endregion Protected Methods + + #region Private Fields + + private int currVal = 100; + private double expTimeMSec = 10000; + private int maxVal = 100; + private int nextVal = 100; + private Random rnd = new Random(); + private string titleMsg = "Test Progress"; + + #endregion Private Fields + } +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/ProgressDisplay.razor b/EgwCoreLib.Razor/ProgressDisplay.razor new file mode 100644 index 0000000..7c2164d --- /dev/null +++ b/EgwCoreLib.Razor/ProgressDisplay.razor @@ -0,0 +1,33 @@ +@*
+
+

loading data

+ +
+
+*@ + +@if (IsLoading) +{ + +
+
+
+
+
+

@Title

+ @DisplayMsg +
+
+ @*
+
+
*@ +
+
+
+
+
+
+
+
+ +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/ProgressDisplay.razor.cs b/EgwCoreLib.Razor/ProgressDisplay.razor.cs new file mode 100644 index 0000000..03a4d2d --- /dev/null +++ b/EgwCoreLib.Razor/ProgressDisplay.razor.cs @@ -0,0 +1,157 @@ +using Microsoft.AspNetCore.Components; + +namespace EgwCoreLib.Razor +{ + public partial class ProgressDisplay : IDisposable + { + #region Public Properties + + [Parameter] + public double CurrVal + { + get => ActVal; + set + { + ActVal = value; + StartVal = value; + IsLoading = ActVal < MaxVal; + } + } + + [Parameter] + public double ExpTimeMSec { get; set; } = 10000; + + [Parameter] + public bool IsLoading { get; set; } = false; + + [Parameter] + public double MaxVal { get; set; } = 100; + + [Parameter] + public double NextVal { get; set; } = 100; + + [Parameter] + public string Title { get; set; } = "Progress"; + + #endregion Public Properties + + #region Public Methods + + public void Dispose() + { + periodicTimer?.Dispose(); + } + + #endregion Public Methods + + #region Protected Fields + + protected PeriodicTimer? periodicTimer = null; + + #endregion Protected Fields + + #region Protected Properties + + protected string currWidth { get; set; } = ""; + protected string modalCss { get; set; } = "alert alert-success"; + + #endregion Protected Properties + + #region Protected Methods + +#if false + protected override void OnInitialized() + { + RunTimer(); // fire-and-forget + } +#endif + + protected override async Task OnParametersSetAsync() + { + // salvo valori aggiornamento... + if (ExpTimeMSec > 0) + { + lastUpdate = DateTime.Now; + nextUpdate = lastUpdate.AddMilliseconds(ExpTimeMSec); + await RefreshDisplay(); + } + if(IsLoading) + { + periodicTimer?.Dispose(); + periodicTimer = new PeriodicTimer(TimeSpan.FromMilliseconds(RefInt)); + RunTimer(); + } + else + { + periodicTimer = null; + } + } + + protected async Task RefreshDisplay() + { + currWidth = $"{(double)ActVal / MaxVal:P0}"; + DisplayMsg = $"{ActVal / MaxVal:P2}"; + await InvokeAsync(StateHasChanged); + } + + #endregion Protected Methods + + #region Private Fields + + [Parameter] + public int RefreshInterval + { + get => RefInt; + set + { + if (RefInt != value && value > 0) + { + RefInt = value; +#if false + periodicTimer?.Dispose(); + periodicTimer = new PeriodicTimer(TimeSpan.FromMilliseconds(value)); + RunTimer(); +#endif + } + } + } + private int RefInt { get; set; } = 100; + + #endregion Private Fields + + #region Private Properties + + private double ActVal { get; set; } = 100; + private string DisplayMsg { get; set; } = "Loading..."; + private DateTime lastUpdate { get; set; } = DateTime.Now.AddMinutes(-1); + private DateTime nextUpdate { get; set; } = DateTime.Now; + private double StartVal { get; set; } = 100; + + #endregion Private Properties + + #region Private Methods + + private async void RunTimer() + { + while (periodicTimer!=null && await periodicTimer.WaitForNextTickAsync()) + { + if (IsLoading) + { + DateTime adesso = DateTime.Now; + if (nextUpdate <= adesso) + { + nextUpdate = adesso.AddMilliseconds(RefreshInterval); + } + // calcolo delta ms... + var deltaMs = adesso.Subtract(lastUpdate).TotalMilliseconds; + var denomMs = nextUpdate.Subtract(lastUpdate).TotalMilliseconds; + // aggiorno display... + ActVal = StartVal + (NextVal - StartVal) * (deltaMs / denomMs); + await RefreshDisplay(); + } + } + } + + #endregion Private Methods + } +} \ No newline at end of file From 7fd09155e016bb2adc6e7fc798791796f449932e Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Sat, 29 Jul 2023 09:50:51 +0200 Subject: [PATCH 2/4] Affinamento display update --- EgwCoreLib.BlazorTest/Pages/TestLoading.razor | 2 +- .../Pages/TestLoading.razor.cs | 12 +- EgwCoreLib.Razor/ProgressDisplay.razor | 43 ++-- EgwCoreLib.Razor/ProgressDisplay.razor.cs | 186 ++++++++++++------ 4 files changed, 154 insertions(+), 89 deletions(-) diff --git a/EgwCoreLib.BlazorTest/Pages/TestLoading.razor b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor index 51306b3..9e66ea2 100644 --- a/EgwCoreLib.BlazorTest/Pages/TestLoading.razor +++ b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor @@ -11,4 +11,4 @@ - + diff --git a/EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs index 24296ba..eaaecf0 100644 --- a/EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs +++ b/EgwCoreLib.BlazorTest/Pages/TestLoading.razor.cs @@ -4,7 +4,7 @@ namespace EgwCoreLib.BlazorTest.Pages { #region Protected Properties - protected double expTime { get; set; } = 20; + protected double expTime { get; set; } = 6; protected int numSteps { get; set; } = 4; #endregion Protected Properties @@ -18,12 +18,11 @@ namespace EgwCoreLib.BlazorTest.Pages int stepVal = maxVal / numSteps; // imposto i valori x progress.. maxVal = 100; - expTimeMSec = stdWait * 1000; + expTimeMSec = (int)(stdWait * 1000); //nextVal = stepVal; //currVal = 0; for (int currStep = 1; currStep <= numSteps; currStep++) { - //await Task.Delay(1); // aggiorno valori currVal = (currStep - 1) * stepVal; nextVal = currStep * stepVal; @@ -33,7 +32,8 @@ namespace EgwCoreLib.BlazorTest.Pages nextVal = maxVal; } await InvokeAsync(StateHasChanged); - nextWait = (int)(rnd.Next(2000, 2500) * stdWait); + // simulo ritardo importante (da 2 a 3 volte + nextWait = (int)(rnd.Next(2000, 3000) * stdWait); // attendo step successivi... await Task.Delay(nextWait); } @@ -47,11 +47,11 @@ namespace EgwCoreLib.BlazorTest.Pages #region Private Fields private int currVal = 100; - private double expTimeMSec = 10000; + private int expTimeMSec = 10000; private int maxVal = 100; private int nextVal = 100; private Random rnd = new Random(); - private string titleMsg = "Test Progress"; + private string titleMsg = "SIM Progress"; #endregion Private Fields } diff --git a/EgwCoreLib.Razor/ProgressDisplay.razor b/EgwCoreLib.Razor/ProgressDisplay.razor index 7c2164d..988f338 100644 --- a/EgwCoreLib.Razor/ProgressDisplay.razor +++ b/EgwCoreLib.Razor/ProgressDisplay.razor @@ -1,29 +1,28 @@ -@*
-
-

loading data

- -
-
-*@ - -@if (IsLoading) +@if (isLoading) { -
+
-
-
-
-

@Title

- @DisplayMsg -
+
+
+ @if (!string.IsNullOrEmpty(Title)) + { + @Title + }
- @*
-
-
*@ -
-
-
+
+ @if (ShowPercent) + { +
+
+ @displayMsg +
+
+ } +
+
+
+
diff --git a/EgwCoreLib.Razor/ProgressDisplay.razor.cs b/EgwCoreLib.Razor/ProgressDisplay.razor.cs index 03a4d2d..db4435b 100644 --- a/EgwCoreLib.Razor/ProgressDisplay.razor.cs +++ b/EgwCoreLib.Razor/ProgressDisplay.razor.cs @@ -4,32 +4,98 @@ namespace EgwCoreLib.Razor { public partial class ProgressDisplay : IDisposable { + #region Public Enums + + public enum ModalSize + { + Small, + Medium, + Large + } + + #endregion Public Enums + #region Public Properties + /// + /// Valore corrente + /// [Parameter] public double CurrVal { - get => ActVal; + get => actVal; set { - ActVal = value; - StartVal = value; - IsLoading = ActVal < MaxVal; + actVal = value; + startVal = value; + isLoading = actVal < MaxVal; } } + /// + /// Dimensioni attese modale + /// default: ModalSize.Medium + /// [Parameter] - public double ExpTimeMSec { get; set; } = 10000; + public ModalSize DisplaySize { get; set; } = ModalSize.Medium; + /// + /// Tempo atteso per prossimo step + /// default: 10000 + /// [Parameter] - public bool IsLoading { get; set; } = false; + public int ExpTimeMSec { get; set; } = 10000; + /// + /// Valore massimo ammesso + /// default: 100 + /// [Parameter] public double MaxVal { get; set; } = 100; + /// + /// Style modale + /// default: card + /// alternative: card alert-primary + /// + [Parameter] + public string ModalCss { get; set; } = "card"; + + /// + /// Prossimo valore ammesso (fino al max) + /// default: 100 + /// [Parameter] public double NextVal { get; set; } = 100; + /// + /// Style progressbar + /// default: progress-bar progress-bar-striped progress-bar-animated + /// + [Parameter] + public string ProgressCss { get; set; } = "progress-bar progress-bar-striped progress-bar-animated"; + + /// + /// Intervallo interno per refresh percentuale avanzamento + /// default: 100ms + /// + [Parameter] + public int RefreshInterval { get; set; } = 100; + + /// + /// Indica se mostrare la percentuale vanzamento + /// default: true + /// + [Parameter] + public bool ShowPercent { get; set; } = true; + + /// + /// Numero di secondi prima (rispetto valore ExpTimeMsec) da cui iniziare rallentamento + /// + [Parameter] + public int SlowWindowMSec { get; set; } = 3000; + + //Titolo da mostrare (se "" NON lo mostra) [Parameter] public string Title { get; set; } = "Progress"; @@ -39,33 +105,40 @@ namespace EgwCoreLib.Razor public void Dispose() { - periodicTimer?.Dispose(); + uiTimer?.Dispose(); } #endregion Public Methods - #region Protected Fields - - protected PeriodicTimer? periodicTimer = null; - - #endregion Protected Fields - #region Protected Properties - protected string currWidth { get; set; } = ""; - protected string modalCss { get; set; } = "alert alert-success"; + protected string modalDialogCss + { + get + { + string answ = "modal-dialog"; + switch (DisplaySize) + { + case ModalSize.Small: + answ = "modal-dialog modal-sm"; + break; + + case ModalSize.Large: + answ = "modal-dialog modal-xl"; + break; + + case ModalSize.Medium: + default: + break; + } + return answ; + } + } #endregion Protected Properties #region Protected Methods -#if false - protected override void OnInitialized() - { - RunTimer(); // fire-and-forget - } -#endif - protected override async Task OnParametersSetAsync() { // salvo valori aggiornamento... @@ -75,78 +148,71 @@ namespace EgwCoreLib.Razor nextUpdate = lastUpdate.AddMilliseconds(ExpTimeMSec); await RefreshDisplay(); } - if(IsLoading) + if (isLoading) { - periodicTimer?.Dispose(); - periodicTimer = new PeriodicTimer(TimeSpan.FromMilliseconds(RefInt)); + uiTimer?.Dispose(); + uiTimer = new PeriodicTimer(TimeSpan.FromMilliseconds(RefreshInterval)); RunTimer(); } else { - periodicTimer = null; + uiTimer = null; } } - protected async Task RefreshDisplay() - { - currWidth = $"{(double)ActVal / MaxVal:P0}"; - DisplayMsg = $"{ActVal / MaxVal:P2}"; - await InvokeAsync(StateHasChanged); - } - #endregion Protected Methods #region Private Fields - [Parameter] - public int RefreshInterval - { - get => RefInt; - set - { - if (RefInt != value && value > 0) - { - RefInt = value; -#if false - periodicTimer?.Dispose(); - periodicTimer = new PeriodicTimer(TimeSpan.FromMilliseconds(value)); - RunTimer(); -#endif - } - } - } - private int RefInt { get; set; } = 100; + private PeriodicTimer? uiTimer = null; #endregion Private Fields #region Private Properties - private double ActVal { get; set; } = 100; - private string DisplayMsg { get; set; } = "Loading..."; + private double actVal { get; set; } = 100; + private string currWidth { get; set; } = ""; + private string displayMsg { get; set; } = "Loading..."; + + private bool isLoading { get; set; } = false; + private DateTime lastUpdate { get; set; } = DateTime.Now.AddMinutes(-1); + private DateTime nextUpdate { get; set; } = DateTime.Now; - private double StartVal { get; set; } = 100; + + private double startVal { get; set; } = 100; #endregion Private Properties #region Private Methods + private async Task RefreshDisplay() + { + currWidth = $"{(double)actVal / MaxVal:P0}"; + if (ShowPercent) + { + displayMsg = $"{actVal / MaxVal:P2}"; + } + await InvokeAsync(StateHasChanged); + } + private async void RunTimer() { - while (periodicTimer!=null && await periodicTimer.WaitForNextTickAsync()) + while (uiTimer != null && await uiTimer.WaitForNextTickAsync()) { - if (IsLoading) + if (isLoading) { DateTime adesso = DateTime.Now; - if (nextUpdate <= adesso) + if (nextUpdate <= adesso.AddMilliseconds(SlowWindowMSec)) { nextUpdate = adesso.AddMilliseconds(RefreshInterval); } // calcolo delta ms... - var deltaMs = adesso.Subtract(lastUpdate).TotalMilliseconds; - var denomMs = nextUpdate.Subtract(lastUpdate).TotalMilliseconds; + var numMs = adesso.Subtract(lastUpdate).TotalMilliseconds; + var denMs = nextUpdate.Subtract(lastUpdate).TotalMilliseconds; + denMs = denMs > 0 ? denMs : 1; // aggiorno display... - ActVal = StartVal + (NextVal - StartVal) * (deltaMs / denomMs); + actVal = startVal + (NextVal - startVal) * (numMs / denMs); await RefreshDisplay(); } } From 99ce59f76fbf4f56a7f6a9bcff9bf8cbb976ff16 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Sat, 29 Jul 2023 11:42:05 +0200 Subject: [PATCH 3/4] Update con aggiunta loader slide oltre a glow --- .../Pages/TestMultiLine.razor | 34 ++++ EgwCoreLib.Razor/LoadingData.razor | 86 +++++++++- EgwCoreLib.Razor/LoadingData.razor.cs | 50 ++++++ EgwCoreLib.Razor/LoadingData.razor.css | 127 +++++++++++++++ EgwCoreLib.Razor/LoadingData.razor.less | 148 ++++++++++++++++++ EgwCoreLib.Razor/LoadingData.razor.min.css | 1 + EgwCoreLib.Razor/compilerconfig.json | 4 + 7 files changed, 445 insertions(+), 5 deletions(-) create mode 100644 EgwCoreLib.Razor/LoadingData.razor.cs create mode 100644 EgwCoreLib.Razor/LoadingData.razor.css create mode 100644 EgwCoreLib.Razor/LoadingData.razor.less create mode 100644 EgwCoreLib.Razor/LoadingData.razor.min.css diff --git a/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor index e3d24db..f734c50 100644 --- a/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor +++ b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor @@ -17,3 +17,37 @@ else
} +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
diff --git a/EgwCoreLib.Razor/LoadingData.razor b/EgwCoreLib.Razor/LoadingData.razor index 354d765..4b9628f 100644 --- a/EgwCoreLib.Razor/LoadingData.razor +++ b/EgwCoreLib.Razor/LoadingData.razor @@ -1,6 +1,82 @@ -
-
-

loading data

- +@if (DisplaySize == CtrlSize.Small) +{ +
+
+ + loading data + + @if (DisplayMode == SpinMode.Normal) + { + + } + else if (DisplayMode == SpinMode.Growl) + { + + } + else + { +
+
+ +
+
+ } +
-
\ No newline at end of file +} +else if (DisplaySize == CtrlSize.Normal) +{ +
+
+

loading data

+ @if (DisplayMode == SpinMode.Normal) + { + + } + else if (DisplayMode == SpinMode.Growl) + { + + } + else + { +
+
+ +
+
+ } +
+
+} +else if (DisplaySize == CtrlSize.Large) +{ +
+
+
+

loading data

+ @if (DisplayMode == SpinMode.Normal) + { + + } + else if (DisplayMode == SpinMode.Growl) + { + + } + else + { +
+
+ +
+
+ } +
+
+
+} \ No newline at end of file diff --git a/EgwCoreLib.Razor/LoadingData.razor.cs b/EgwCoreLib.Razor/LoadingData.razor.cs new file mode 100644 index 0000000..60b8647 --- /dev/null +++ b/EgwCoreLib.Razor/LoadingData.razor.cs @@ -0,0 +1,50 @@ +using Microsoft.AspNetCore.Components; + +namespace EgwCoreLib.Razor +{ + public partial class LoadingData + { + #region Public Enums + + public enum CtrlSize + { + Normal, + Small, + Large + } + + public enum SpinMode + { + Normal, + Growl, + BounceLine + } + + #endregion Public Enums + + #region Public Properties + + /// + /// Modalità display principale + /// default: alert alert-primary + /// + [Parameter] + public string DisplayCss { get; set; } = "alert alert-primary"; + + /// + /// Modalità animazione + /// default: Normal + /// + [Parameter] + public SpinMode DisplayMode { get; set; } = SpinMode.Normal; + + /// + /// Dimensione display + /// default: Normal + /// + [Parameter] + public CtrlSize DisplaySize { get; set; } = CtrlSize.Normal; + + #endregion Public Properties + } +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/LoadingData.razor.css b/EgwCoreLib.Razor/LoadingData.razor.css new file mode 100644 index 0000000..e8ccd38 --- /dev/null +++ b/EgwCoreLib.Razor/LoadingData.razor.css @@ -0,0 +1,127 @@ +.modalOrd { + position: relative; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: #000000; + background-color: rgba(0, 0, 0, 0.6); +} +.loader { + width: 5rem; + position: relative; +} +.loader-text { + position: relative; + top: 0; + padding: 0; + margin: 0; + color: #C8B6FF; + animation: text_713 3.5s ease both infinite; + font-size: 0.8rem; + letter-spacing: 1px; +} +.load { + background-color: #9A79FF; + border-radius: 3rem; + display: block; + height: 1rem; + width: 1rem; + bottom: 0; + position: relative; + transform: translateX(64px); + animation: loading_713 3.5s ease both infinite; +} +.load::before { + position: relative; + content: ""; + width: 100%; + height: 100%; + background-color: #D1C2FF; + border-radius: inherit; + animation: loading2_713 3.5s ease both infinite; +} +@keyframes text_713 { + 0% { + letter-spacing: 1px; + transform: translateX(0px); + } + 40% { + letter-spacing: 2px; + transform: translateX(26px); + } + 80% { + letter-spacing: 1px; + transform: translateX(32px); + } + 90% { + letter-spacing: 2px; + transform: translateX(0px); + } + 100% { + letter-spacing: 1px; + transform: translateX(0px); + } +} +@keyframes loading_713 { + 0% { + width: 16px; + transform: translateX(0px); + } + 40% { + width: 100%; + transform: translateX(0px); + } + 80% { + width: 16px; + transform: translateX(64px); + } + 90% { + width: 100%; + transform: translateX(0px); + } + 100% { + width: 16px; + transform: translateX(0px); + } +} +@keyframes loading2_713 { + 0% { + transform: translateX(0px); + width: 16px; + } + 40% { + transform: translateX(0%); + width: 80%; + } + 80% { + width: 100%; + transform: translateX(0px); + } + 90% { + width: 80%; + transform: translateX(15px); + } + 100% { + transform: translateX(0px); + width: 16px; + } +} +/* Modal Content/Box */ +.modalOrd-content-small { + margin: auto; + padding-left: 20%; + width: 50%; +} +.modalOrd-content { + margin: 1.4rem auto; + padding-left: 20%; + width: 50%; +} +.modalOrd-content-large { + margin: 2.4rem auto; + padding-left: 20%; + width: 50%; +} \ No newline at end of file diff --git a/EgwCoreLib.Razor/LoadingData.razor.less b/EgwCoreLib.Razor/LoadingData.razor.less new file mode 100644 index 0000000..838052b --- /dev/null +++ b/EgwCoreLib.Razor/LoadingData.razor.less @@ -0,0 +1,148 @@ +.modalOrd { + position: relative; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.6); +} + + +.loader { + width: 5rem; + position: relative; +} + +.loader-text { + position: relative; + top: 0; + padding: 0; + margin: 0; + color: #C8B6FF; + animation: text_713 3.5s ease both infinite; + font-size: .8rem; + letter-spacing: 1px; +} + +.load { + background-color: #9A79FF; + border-radius: 3rem; + display: block; + height: 1rem; + width: 1rem; + bottom: 0; + position: relative; + transform: translateX(64px); + animation: loading_713 3.5s ease both infinite; +} + +.load::before { + position: relative; + content: ""; + width: 100%; + height: 100%; + background-color: #D1C2FF; + border-radius: inherit; + animation: loading2_713 3.5s ease both infinite; +} + +@keyframes text_713 { + 0% { + letter-spacing: 1px; + transform: translateX(0px); + } + + 40% { + letter-spacing: 2px; + transform: translateX(26px); + } + + 80% { + letter-spacing: 1px; + transform: translateX(32px); + } + + 90% { + letter-spacing: 2px; + transform: translateX(0px); + } + + 100% { + letter-spacing: 1px; + transform: translateX(0px); + } +} + +@keyframes loading_713 { + 0% { + width: 16px; + transform: translateX(0px); + } + + 40% { + width: 100%; + transform: translateX(0px); + } + + 80% { + width: 16px; + transform: translateX(64px); + } + + 90% { + width: 100%; + transform: translateX(0px); + } + + 100% { + width: 16px; + transform: translateX(0px); + } +} + +@keyframes loading2_713 { + 0% { + transform: translateX(0px); + width: 16px; + } + + 40% { + transform: translateX(0%); + width: 80%; + } + + 80% { + width: 100%; + transform: translateX(0px); + } + + 90% { + width: 80%; + transform: translateX(15px); + } + + 100% { + transform: translateX(0px); + width: 16px; + } +} + +/* Modal Content/Box */ +.modalOrd-content-small { + margin: auto; + padding-left: 20%; + width: 50%; +} +.modalOrd-content { + margin: 1.4rem auto; + padding-left: 20%; + width: 50%; +} +.modalOrd-content-large { + margin: 2.4rem auto; + padding-left: 20%; + width: 50%; +} diff --git a/EgwCoreLib.Razor/LoadingData.razor.min.css b/EgwCoreLib.Razor/LoadingData.razor.min.css new file mode 100644 index 0000000..2918702 --- /dev/null +++ b/EgwCoreLib.Razor/LoadingData.razor.min.css @@ -0,0 +1 @@ +.modalOrd{position:relative;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.6);}.loader{width:5rem;position:relative;}.loader-text{position:relative;top:0;padding:0;margin:0;color:#c8b6ff;animation:text_713 3.5s ease both infinite;font-size:.8rem;letter-spacing:1px;}.load{background-color:#9a79ff;border-radius:3rem;display:block;height:1rem;width:1rem;bottom:0;position:relative;transform:translateX(64px);animation:loading_713 3.5s ease both infinite;}.load::before{position:relative;content:"";width:100%;height:100%;background-color:#d1c2ff;border-radius:inherit;animation:loading2_713 3.5s ease both infinite;}@keyframes text_713{0%{letter-spacing:1px;transform:translateX(0);}40%{letter-spacing:2px;transform:translateX(26px);}80%{letter-spacing:1px;transform:translateX(32px);}90%{letter-spacing:2px;transform:translateX(0);}100%{letter-spacing:1px;transform:translateX(0);}}@keyframes loading_713{0%{width:16px;transform:translateX(0);}40%{width:100%;transform:translateX(0);}80%{width:16px;transform:translateX(64px);}90%{width:100%;transform:translateX(0);}100%{width:16px;transform:translateX(0);}}@keyframes loading2_713{0%{transform:translateX(0);width:16px;}40%{transform:translateX(0%);width:80%;}80%{width:100%;transform:translateX(0);}90%{width:80%;transform:translateX(15px);}100%{transform:translateX(0);width:16px;}}.modalOrd-content-small{margin:auto;padding-left:20%;width:50%;}.modalOrd-content{margin:1.4rem auto;padding-left:20%;width:50%;}.modalOrd-content-large{margin:2.4rem auto;padding-left:20%;width:50%;} \ No newline at end of file diff --git a/EgwCoreLib.Razor/compilerconfig.json b/EgwCoreLib.Razor/compilerconfig.json index 3aa4469..47adeac 100644 --- a/EgwCoreLib.Razor/compilerconfig.json +++ b/EgwCoreLib.Razor/compilerconfig.json @@ -22,5 +22,9 @@ { "outputFile": "CalWeekColumn.razor.css", "inputFile": "CalWeekColumn.razor.less" + }, + { + "outputFile": "LoadingData.razor.css", + "inputFile": "LoadingData.razor.less" } ] \ No newline at end of file From 53618c605ff6692efbe81c404523c4adb029a5cb Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Sat, 29 Jul 2023 12:04:11 +0200 Subject: [PATCH 4/4] Completata versione attuale componenti loading --- EgwCoreLib.Razor/LoadingData.razor | 44 +++++++++++----------- EgwCoreLib.Razor/LoadingData.razor.css | 3 +- EgwCoreLib.Razor/LoadingData.razor.less | 3 +- EgwCoreLib.Razor/LoadingData.razor.min.css | 2 +- 4 files changed, 26 insertions(+), 26 deletions(-) diff --git a/EgwCoreLib.Razor/LoadingData.razor b/EgwCoreLib.Razor/LoadingData.razor index 4b9628f..40de504 100644 --- a/EgwCoreLib.Razor/LoadingData.razor +++ b/EgwCoreLib.Razor/LoadingData.razor @@ -1,28 +1,30 @@ @if (DisplaySize == CtrlSize.Small) { -
-
- - loading data - - @if (DisplayMode == SpinMode.Normal) - { - - } - else if (DisplayMode == SpinMode.Growl) - { -