From 99ce59f76fbf4f56a7f6a9bcff9bf8cbb976ff16 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Sat, 29 Jul 2023 11:42:05 +0200 Subject: [PATCH] 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