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
     </div>
 }
 
+<hr />
+<div class="row">
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Small" DisplayMode="LoadingData.SpinMode.Normal"></LoadingData>
+    </div>
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Small" DisplayMode="LoadingData.SpinMode.Growl"></LoadingData>
+    </div>
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Small" DisplayMode="LoadingData.SpinMode.BounceLine"></LoadingData>
+    </div>
+</div>
+<div class="row">
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Normal" DisplayMode="LoadingData.SpinMode.Normal"></LoadingData>
+    </div>
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Normal" DisplayMode="LoadingData.SpinMode.Growl"></LoadingData>
+    </div>
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Normal" DisplayMode="LoadingData.SpinMode.BounceLine"></LoadingData>
+    </div>
+</div>
+<div class="row">
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Large" DisplayMode="LoadingData.SpinMode.Normal"></LoadingData>
+    </div>
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Large" DisplayMode="LoadingData.SpinMode.Growl"></LoadingData>
+    </div>
+    <div class="col-4">
+        <LoadingData DisplaySize="LoadingData.CtrlSize.Large" DisplayMode="LoadingData.SpinMode.BounceLine"></LoadingData>
+    </div>
+</div>
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 @@
-<div class="row p-3 m-2">
-    <div class="col-12 text-center mt-5 py-5 alert alert-primary">
-        <h3>loading data</h3>
-        <i class="fas fa-spinner fa-spin fa-5x"></i>
+@if (DisplaySize == CtrlSize.Small)
+{
+    <div class="@DisplayCss d-flex justify-content-around p-1 m-1">
+        <div class="w-100 text-center my-1 py-1">
+            <span class="mx-1">
+                <b>loading data</b>
+            </span>
+            @if (DisplayMode == SpinMode.Normal)
+            {
+                <i class="fas fa-spinner fa-spin"></i>
+            }
+            else if (DisplayMode == SpinMode.Growl)
+            {
+                <div class="spinner-grow" role="status" style="width: 1.3rem; height: 1.3rem;">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            }
+            else
+            {
+                <div class="modalOrd-content-small text-center">
+                    <div class="loader">
+                        <span class="load"></span>
+                    </div>
+                </div>
+            }
+        </div>
     </div>
-</div>
\ No newline at end of file
+}
+else if (DisplaySize == CtrlSize.Normal)
+{
+    <div class="@DisplayCss d-flex justify-content-around p-1 m-1">
+        <div class="w-100 text-center my-1 py-1">
+            <h3>loading data</h3>
+            @if (DisplayMode == SpinMode.Normal)
+            {
+                <i class="fas fa-spinner fa-spin fa-3x"></i>
+            }
+            else if (DisplayMode == SpinMode.Growl)
+            {
+                <div class="spinner-grow" role="status" style="width: 3rem; height: 3rem;">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            }
+            else
+            {
+                <div class="modalOrd-content text-center">
+                    <div class="loader">
+                        <span class="load"></span>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+}
+else if (DisplaySize == CtrlSize.Large)
+{
+    <div class="row p-1 m-1">
+        <div class="@DisplayCss my-3 py-3">
+            <div class="col-12 text-center">
+                <h1>loading data</h1>
+                @if (DisplayMode == SpinMode.Normal)
+                {
+                    <i class="fas fa-spinner fa-spin fa-5x"></i>
+                }
+                else if (DisplayMode == SpinMode.Growl)
+                {
+                    <div class="spinner-grow" role="status" style="width: 5rem; height: 5rem;">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                }
+                else
+                {
+                    <div class="modalOrd-content-large text-center">
+                        <div class="loader">
+                            <span class="load"></span>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
\ 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
+
+        /// <summary>
+        /// Modalità display principale
+        /// default: alert alert-primary
+        /// </summary>
+        [Parameter]
+        public string DisplayCss { get; set; } = "alert alert-primary";
+
+        /// <summary>
+        /// Modalità animazione
+        /// default: Normal
+        /// </summary>
+        [Parameter]
+        public SpinMode DisplayMode { get; set; } = SpinMode.Normal;
+
+        /// <summary>
+        /// Dimensione display
+        /// default: Normal
+        /// </summary>
+        [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