diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitBarsLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitBarsLoading.razor
index 96c2757eb7..a59f9d69b7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitBarsLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitBarsLoading.razor
@@ -2,38 +2,38 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-bars {
+    .bit-ldn-Bars {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-bars div {
+        .bit-ldn-Bars div {
             display: inline-block;
             position: absolute;
             left: @(Convert(8))px;
             width: @(Convert(16))px;
             background: @Color;
-            animation: blazor-loading-bars 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+            animation: bit-ldn-Bars 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
         }
 
-            .blazor-loading-bars div:nth-child(1) {
+            .bit-ldn-Bars div:nth-child(1) {
                 left: @(Convert(8))px;
                 animation-delay: -0.24s;
             }
 
-            .blazor-loading-bars div:nth-child(2) {
+            .bit-ldn-Bars div:nth-child(2) {
                 left: @(Convert(32))px;
                 animation-delay: -0.12s;
             }
 
-            .blazor-loading-bars div:nth-child(3) {
+            .bit-ldn-Bars div:nth-child(3) {
                 left: @(Convert(56))px;
                 animation-delay: 0;
             }
 
-    @@keyframes blazor-loading-bars {
+    @@keyframes bit-ldn-Bars {
         0% {
             top: @(Convert(8))px;
             height: @(Convert(64))px;
@@ -44,6 +44,11 @@
             height: @(Convert(32))px;
         }
     }
-
 </style>
-<div class="blazor-loading-bars"><div></div><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Bars @Class">
+    @for (int i = 0; i < 3; i++)
+    {
+        <div style="@ChildStyle" class="@ChildClass"></div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitCircleLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitCircleLoading.razor
index ce5e405e38..8b130fb574 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitCircleLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitCircleLoading.razor
@@ -6,22 +6,22 @@
 }
 
 <style>
-    .blazor-loading-circle {
+    .bit-ldn-Circle {
         display: inline-block;
         transform: translateZ(1px);
     }
 
-        .blazor-loading-circle > div {
+        .bit-ldn-Circle > div {
             display: inline-block;
             width: @(Size)px;
             height: @(Size)px;
             margin: @(Convert(8))px;
             border-radius: 50%;
             background: @Color;
-            animation: blazor-loading-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+            animation: bit-ldn-Circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
         }
 
-    @@keyframes blazor-loading-circle {
+    @@keyframes bit-ldn-Circle {
         0%, 100% {
             animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
         }
@@ -40,4 +40,7 @@
         }
     }
 </style>
-<div class="blazor-loading-circle"><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Circle @Class">
+    <div style="@ChildStyle" class="@ChildClass"></div>
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDotsRingLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDotsRingLoading.razor
index f1f5ad9062..b7c88ee54c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDotsRingLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDotsRingLoading.razor
@@ -2,95 +2,95 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-dots-ring {
+    .bit-ldn-DotsRing {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-dots-ring div {
+        .bit-ldn-DotsRing div {
             position: absolute;
             width: @(Convert(6))px;
             height: @(Convert(6))px;
             background: @Color;
             border-radius: 50%;
-            animation: blazor-loading-dots-ring 1.2s linear infinite;
+            animation: bit-ldn-DotsRing 1.2s linear infinite;
         }
 
-            .blazor-loading-dots-ring div:nth-child(1) {
+            .bit-ldn-DotsRing div:nth-child(1) {
                 animation-delay: 0s;
                 top: @(Convert(37))px;
                 left: @(Convert(66))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(2) {
+            .bit-ldn-DotsRing div:nth-child(2) {
                 animation-delay: -0.1s;
                 top: @(Convert(22))px;
                 left: @(Convert(62))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(3) {
+            .bit-ldn-DotsRing div:nth-child(3) {
                 animation-delay: -0.2s;
                 top: @(Convert(11))px;
                 left: @(Convert(52))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(4) {
+            .bit-ldn-DotsRing div:nth-child(4) {
                 animation-delay: -0.3s;
                 top: @(Convert(7))px;
                 left: @(Convert(37))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(5) {
+            .bit-ldn-DotsRing div:nth-child(5) {
                 animation-delay: -0.4s;
                 top: @(Convert(11))px;
                 left: @(Convert(22))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(6) {
+            .bit-ldn-DotsRing div:nth-child(6) {
                 animation-delay: -0.5s;
                 top: @(Convert(22))px;
                 left: @(Convert(11))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(7) {
+            .bit-ldn-DotsRing div:nth-child(7) {
                 animation-delay: -0.6s;
                 top: @(Convert(37))px;
                 left: @(Convert(7))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(8) {
+            .bit-ldn-DotsRing div:nth-child(8) {
                 animation-delay: -0.7s;
                 top: @(Convert(52))px;
                 left: @(Convert(11))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(9) {
+            .bit-ldn-DotsRing div:nth-child(9) {
                 animation-delay: -0.8s;
                 top: @(Convert(62))px;
                 left: @(Convert(22))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(10) {
+            .bit-ldn-DotsRing div:nth-child(10) {
                 animation-delay: -0.9s;
                 top: @(Convert(66))px;
                 left: @(Convert(37))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(11) {
+            .bit-ldn-DotsRing div:nth-child(11) {
                 animation-delay: -1s;
                 top: @(Convert(62))px;
                 left: @(Convert(52))px;
             }
 
-            .blazor-loading-dots-ring div:nth-child(12) {
+            .bit-ldn-DotsRing div:nth-child(12) {
                 animation-delay: -1.1s;
                 top: @(Convert(52))px;
                 left: @(Convert(62))px;
             }
 
-    @@keyframes blazor-loading-dots-ring {
+    @@keyframes bit-ldn-DotsRing {
         0%, 20%, 80%, 100% {
             transform: scale(1);
         }
@@ -100,4 +100,10 @@
         }
     }
 </style>
-<div class="blazor-loading-dots-ring"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-DotsRing @Class">
+    @for (int i = 0; i < 12; i++)
+    {
+        <div style="@ChildStyle" class="@ChildClass"></div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDualRingLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDualRingLoading.razor
index f38aff0f5f..c05fb2ea03 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDualRingLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitDualRingLoading.razor
@@ -2,13 +2,13 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-dual-ring {
+    .bit-ldn-DualRing {
         display: inline-block;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-dual-ring:after {
+        .bit-ldn-DualRing:after {
             content: " ";
             display: block;
             width: @(Convert(64))px;
@@ -17,10 +17,10 @@
             border-radius: 50%;
             border: @(Convert(6))px solid @Color;
             border-color: @Color transparent @Color transparent;
-            animation: blazor-loading-dual-ring 1.2s linear infinite;
+            animation: bit-ldn-DualRing 1.2s linear infinite;
         }
 
-    @@keyframes blazor-loading-dual-ring {
+    @@keyframes bit-ldn-DualRing {
         0% {
             transform: rotate(0deg);
         }
@@ -30,4 +30,5 @@
         }
     }
 </style>
-<div class="blazor-loading-dual-ring"></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-DualRing @Class"></div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitEllipsisLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitEllipsisLoading.razor
index afe534744c..36dedc33e4 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitEllipsisLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitEllipsisLoading.razor
@@ -2,14 +2,14 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-ellipsis {
+    .bit-ldn-Ellipsis {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-ellipsis div {
+        .bit-ldn-Ellipsis div {
             position: absolute;
             top: @(Convert(33))px;
             width: @(Convert(13))px;
@@ -19,27 +19,27 @@
             animation-timing-function: cubic-bezier(0, 1, 1, 0);
         }
 
-            .blazor-loading-ellipsis div:nth-child(1) {
+            .bit-ldn-Ellipsis div:nth-child(1) {
                 left: @(Convert(8))px;
-                animation: blazor-loading-ellipsis1 0.6s infinite;
+                animation: bit-ldn-Ellipsis1 0.6s infinite;
             }
 
-            .blazor-loading-ellipsis div:nth-child(2) {
+            .bit-ldn-Ellipsis div:nth-child(2) {
                 left: @(Convert(8))px;
-                animation: blazor-loading-ellipsis2 0.6s infinite;
+                animation: bit-ldn-Ellipsis2 0.6s infinite;
             }
 
-            .blazor-loading-ellipsis div:nth-child(3) {
+            .bit-ldn-Ellipsis div:nth-child(3) {
                 left: @(Convert(32))px;
-                animation: blazor-loading-ellipsis2 0.6s infinite;
+                animation: bit-ldn-Ellipsis2 0.6s infinite;
             }
 
-            .blazor-loading-ellipsis div:nth-child(4) {
+            .bit-ldn-Ellipsis div:nth-child(4) {
                 left: @(Convert(56))px;
-                animation: blazor-loading-ellipsis3 0.6s infinite;
+                animation: bit-ldn-Ellipsis3 0.6s infinite;
             }
 
-    @@keyframes blazor-loading-ellipsis1 {
+    @@keyframes bit-ldn-Ellipsis1 {
         0% {
             transform: scale(0);
         }
@@ -49,7 +49,7 @@
         }
     }
 
-    @@keyframes blazor-loading-ellipsis3 {
+    @@keyframes bit-ldn-Ellipsis3 {
         0% {
             transform: scale(1);
         }
@@ -59,7 +59,7 @@
         }
     }
 
-    @@keyframes blazor-loading-ellipsis2 {
+    @@keyframes bit-ldn-Ellipsis2 {
         0% {
             transform: translate(0, 0);
         }
@@ -69,4 +69,10 @@
         }
     }
 </style>
-<div class="blazor-loading-ellipsis"><div></div><div></div><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Ellipsis @Class">
+    @for (int i = 0; i < 4; i++)
+    {
+        <div style="@ChildStyle" class="@ChildClass"></div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitGridLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitGridLoading.razor
index 71c7b0a0de..a4856faa1c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitGridLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitGridLoading.razor
@@ -2,77 +2,77 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-grid {
+    .bit-ldn-Grid {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-grid div {
+        .bit-ldn-Grid div {
             position: absolute;
             width: @(Convert(16))px;
             height: @(Convert(16))px;
             border-radius: 50%;
             background: @Color;
-            animation: blazor-loading-grid 1.2s linear infinite;
+            animation: bit-ldn-Grid 1.2s linear infinite;
         }
 
-            .blazor-loading-grid div:nth-child(1) {
+            .bit-ldn-Grid div:nth-child(1) {
                 top: @(Convert(8))px;
                 left: @(Convert(8))px;
                 animation-delay: 0s;
             }
 
-            .blazor-loading-grid div:nth-child(2) {
+            .bit-ldn-Grid div:nth-child(2) {
                 top: @(Convert(8))px;
                 left: @(Convert(32))px;
                 animation-delay: -0.4s;
             }
 
-            .blazor-loading-grid div:nth-child(3) {
+            .bit-ldn-Grid div:nth-child(3) {
                 top: @(Convert(8))px;
                 left: @(Convert(56))px;
                 animation-delay: -0.8s;
             }
 
-            .blazor-loading-grid div:nth-child(4) {
+            .bit-ldn-Grid div:nth-child(4) {
                 top: @(Convert(32))px;
                 left: @(Convert(8))px;
                 animation-delay: -0.4s;
             }
 
-            .blazor-loading-grid div:nth-child(5) {
+            .bit-ldn-Grid div:nth-child(5) {
                 top: @(Convert(32))px;
                 left: @(Convert(32))px;
                 animation-delay: -0.8s;
             }
 
-            .blazor-loading-grid div:nth-child(6) {
+            .bit-ldn-Grid div:nth-child(6) {
                 top: @(Convert(32))px;
                 left: @(Convert(56))px;
                 animation-delay: -1.2s;
             }
 
-            .blazor-loading-grid div:nth-child(7) {
+            .bit-ldn-Grid div:nth-child(7) {
                 top: @(Convert(56))px;
                 left: @(Convert(8))px;
                 animation-delay: -0.8s;
             }
 
-            .blazor-loading-grid div:nth-child(8) {
+            .bit-ldn-Grid div:nth-child(8) {
                 top: @(Convert(56))px;
                 left: @(Convert(32))px;
                 animation-delay: -1.2s;
             }
 
-            .blazor-loading-grid div:nth-child(9) {
+            .bit-ldn-Grid div:nth-child(9) {
                 top: @(Convert(56))px;
                 left: @(Convert(56))px;
                 animation-delay: -1.6s;
             }
 
-    @@keyframes blazor-loading-grid {
+    @@keyframes bit-ldn-Grid {
         0%, 100% {
             opacity: 1;
         }
@@ -82,4 +82,10 @@
         }
     }
 </style>
-<div class="blazor-loading-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Grid @Class">
+    @for (int i = 0; i < 9; i++)
+    {
+        <div style="@ChildStyle" class="@ChildClass"></div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHeartLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHeartLoading.razor
index 61dacc0936..6166925d3b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHeartLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHeartLoading.razor
@@ -2,7 +2,7 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-heart {
+    .bit-ldn-Heart {
         display: inline-block;
         position: relative;
         width: @(Size)px;
@@ -11,18 +11,18 @@
         transform-origin: @(Convert(40))px @(Convert(40))px;
     }
 
-        .blazor-loading-heart div {
+        .bit-ldn-Heart div {
             top: @(Convert(32))px;
             left: @(Convert(32))px;
             position: absolute;
             width: @(Convert(32))px;
             height: @(Convert(32))px;
             background: @Color;
-            animation: blazor-loading-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+            animation: bit-ldn-Heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
         }
 
-            .blazor-loading-heart div:after,
-            .blazor-loading-heart div:before {
+            .bit-ldn-Heart div:after,
+            .bit-ldn-Heart div:before {
                 content: " ";
                 position: absolute;
                 display: block;
@@ -31,17 +31,17 @@
                 background: @Color;
             }
 
-            .blazor-loading-heart div:before {
+            .bit-ldn-Heart div:before {
                 left: -@(Convert(24))px;
                 border-radius: 50% 0 0 50%;
             }
 
-            .blazor-loading-heart div:after {
+            .bit-ldn-Heart div:after {
                 top: -@(Convert(24))px;
                 border-radius: 50% 50% 0 0;
             }
 
-    @@keyframes blazor-loading-heart {
+    @@keyframes bit-ldn-Heart {
         0% {
             transform: scale(0.95);
         }
@@ -67,4 +67,7 @@
         }
     }
 </style>
-<div class="blazor-loading-heart"><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Heart @Class">
+    <div style="@ChildStyle" class="@ChildClass"></div>
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHourglassLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHourglassLoading.razor
index 3c4ba864ac..5f28a19fc2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHourglassLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitHourglassLoading.razor
@@ -2,14 +2,14 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-hourglass {
+    .bit-ldn-Hourglass {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-hourglass:after {
+        .bit-ldn-Hourglass:after {
             content: " ";
             display: block;
             border-radius: 50%;
@@ -19,10 +19,10 @@
             box-sizing: border-box;
             border: @(Convert(32))px solid @Color;
             border-color: @Color transparent @Color transparent;
-            animation: blazor-loading-hourglass 1.2s infinite;
+            animation: bit-ldn-Hourglass 1.2s infinite;
         }
 
-    @@keyframes blazor-loading-hourglass {
+    @@keyframes bit-ldn-Hourglass {
         0% {
             transform: rotate(0);
             animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@@ -38,4 +38,5 @@
         }
     }
 </style>
-<div class="blazor-loading-hourglass"></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Hourglass @Class"></div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitLoadingComponentBase.cs b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitLoadingComponentBase.cs
index 3d6c5bb692..d27630c319 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitLoadingComponentBase.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitLoadingComponentBase.cs
@@ -12,6 +12,26 @@ public class BitLoadingComponentBase : ComponentBase
     /// </summary>
     [Parameter] public string Color { get; set; } = "#FFFFFF";
 
+    /// <summary>
+    /// Custom CSS class for the root element of the component.
+    /// </summary>
+    [Parameter] public string? Class { get; set; }
+
+    /// <summary>
+    /// Custom CSS style for the root element of the component.
+    /// </summary>
+    [Parameter] public string? Style { get; set; }
+
+    /// <summary>
+    /// Custom CSS class for the child element(s) of the component.
+    /// </summary>
+    [Parameter] public string? ChildClass { get; set; }
+
+    /// <summary>
+    /// Custom CSS style for the child element(s) of the component.
+    /// </summary>
+    [Parameter] public string? ChildStyle { get; set; }
+
     protected virtual int OriginalSize { get; set; } = 80;
 
     protected string Convert(double value)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRingLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRingLoading.razor
index 215f9ebf1d..f1e5e26a5d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRingLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRingLoading.razor
@@ -2,14 +2,14 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-ring {
+    .bit-ldn-Ring {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-ring div {
+        .bit-ldn-Ring div {
             box-sizing: border-box;
             display: block;
             position: absolute;
@@ -18,23 +18,23 @@
             margin: @(Convert(8))px;
             border: @(Convert(8))px solid @Color;
             border-radius: 50%;
-            animation: blazor-loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+            animation: bit-ldn-Ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
             border-color: @Color transparent transparent transparent;
         }
 
-            .blazor-loading-ring div:nth-child(1) {
+            .bit-ldn-Ring div:nth-child(1) {
                 animation-delay: -0.45s;
             }
 
-            .blazor-loading-ring div:nth-child(2) {
+            .bit-ldn-Ring div:nth-child(2) {
                 animation-delay: -0.3s;
             }
 
-            .blazor-loading-ring div:nth-child(3) {
+            .bit-ldn-Ring div:nth-child(3) {
                 animation-delay: -0.15s;
             }
 
-    @@keyframes blazor-loading-ring {
+    @@keyframes bit-ldn-Ring {
         0% {
             transform: rotate(0deg);
         }
@@ -44,4 +44,10 @@
         }
     }
 </style>
-<div class="blazor-loading-ring"><div></div><div></div><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Ring @Class">
+    @for (int i = 0; i < 4; i++)
+    {
+        <div style="@ChildStyle" class="@ChildClass"></div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRippleLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRippleLoading.razor
index 196b97b4bc..c889dc5f98 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRippleLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRippleLoading.razor
@@ -2,26 +2,26 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .lds-ripple {
+    .bit-ldn-Ripple {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .lds-ripple div {
+        .bit-ldn-Ripple div {
             position: absolute;
             border: @(Convert(4))px solid @Color;
             opacity: 1;
             border-radius: 50%;
-            animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+            animation: bit-ldn-Ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
         }
 
-            .lds-ripple div:nth-child(2) {
+            .bit-ldn-Ripple div:nth-child(2) {
                 animation-delay: -0.5s;
             }
 
-    @@keyframes lds-ripple {
+    @@keyframes bit-ldn-Ripple {
         0% {
             top: @(Convert(36))px;
             left: @(Convert(36))px;
@@ -55,4 +55,8 @@
         }
     }
 </style>
-<div class="lds-ripple"><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Ripple @Class">
+    <div style="@ChildStyle" class="@ChildClass"></div>
+    <div style="@ChildStyle" class="@ChildClass"></div>
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRollerLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRollerLoading.razor
index 22d5d9dca5..d61d50de43 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRollerLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitRollerLoading.razor
@@ -2,19 +2,19 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-roller {
+    .bit-ldn-Roller {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-roller div {
-            animation: blazor-loading-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        .bit-ldn-Roller div {
+            animation: bit-ldn-Roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
             transform-origin: @(Convert(40))px @(Convert(40))px;
         }
 
-            .blazor-loading-roller div:after {
+            .bit-ldn-Roller div:after {
                 content: " ";
                 display: block;
                 position: absolute;
@@ -25,79 +25,79 @@
                 margin: -@(Convert(4))px 0 0 -@(Convert(4))px;
             }
 
-            .blazor-loading-roller div:nth-child(1) {
+            .bit-ldn-Roller div:nth-child(1) {
                 animation-delay: -0.036s;
             }
 
-                .blazor-loading-roller div:nth-child(1):after {
+                .bit-ldn-Roller div:nth-child(1):after {
                     top: @(Convert(63))px;
                     left: @(Convert(63))px;
                 }
 
-            .blazor-loading-roller div:nth-child(2) {
+            .bit-ldn-Roller div:nth-child(2) {
                 animation-delay: -0.072s;
             }
 
-                .blazor-loading-roller div:nth-child(2):after {
+                .bit-ldn-Roller div:nth-child(2):after {
                     top: @(Convert(68))px;
                     left: @(Convert(56))px;
                 }
 
-            .blazor-loading-roller div:nth-child(3) {
+            .bit-ldn-Roller div:nth-child(3) {
                 animation-delay: -0.108s;
             }
 
-                .blazor-loading-roller div:nth-child(3):after {
+                .bit-ldn-Roller div:nth-child(3):after {
                     top: @(Convert(71))px;
                     left: @(Convert(48))px;
                 }
 
-            .blazor-loading-roller div:nth-child(4) {
+            .bit-ldn-Roller div:nth-child(4) {
                 animation-delay: -0.144s;
             }
 
-                .blazor-loading-roller div:nth-child(4):after {
+                .bit-ldn-Roller div:nth-child(4):after {
                     top: @(Convert(72))px;
                     left: @(Convert(40))px;
                 }
 
-            .blazor-loading-roller div:nth-child(5) {
+            .bit-ldn-Roller div:nth-child(5) {
                 animation-delay: -0.18s;
             }
 
-                .blazor-loading-roller div:nth-child(5):after {
+                .bit-ldn-Roller div:nth-child(5):after {
                     top: @(Convert(71))px;
                     left: @(Convert(32))px;
                 }
 
-            .blazor-loading-roller div:nth-child(6) {
+            .bit-ldn-Roller div:nth-child(6) {
                 animation-delay: -0.216s;
             }
 
-                .blazor-loading-roller div:nth-child(6):after {
+                .bit-ldn-Roller div:nth-child(6):after {
                     top: @(Convert(68))px;
                     left: @(Convert(24))px;
                 }
 
-            .blazor-loading-roller div:nth-child(7) {
+            .bit-ldn-Roller div:nth-child(7) {
                 animation-delay: -0.252s;
             }
 
-                .blazor-loading-roller div:nth-child(7):after {
+                .bit-ldn-Roller div:nth-child(7):after {
                     top: @(Convert(63))px;
                     left: @(Convert(17))px;
                 }
 
-            .blazor-loading-roller div:nth-child(8) {
+            .bit-ldn-Roller div:nth-child(8) {
                 animation-delay: -0.288s;
             }
 
-                .blazor-loading-roller div:nth-child(8):after {
+                .bit-ldn-Roller div:nth-child(8):after {
                     top: @(Convert(56))px;
                     left: @(Convert(12))px;
                 }
 
-    @@keyframes blazor-loading-roller {
+    @@keyframes bit-ldn-Roller {
         0% {
             transform: rotate(0deg);
         }
@@ -107,4 +107,10 @@
         }
     }
 </style>
-<div class="blazor-loading-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Roller @Class">
+    @for (int i = 0; i < 8; i++)
+    {
+        <div style="@ChildStyle" class="@ChildClass"></div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitSpinnerLoading.razor b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitSpinnerLoading.razor
index 7dbde25e05..67c9221bc9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitSpinnerLoading.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Loading/BitSpinnerLoading.razor
@@ -2,20 +2,19 @@
 @inherits BitLoadingComponentBase
 
 <style>
-    .blazor-loading-spinner {
-        color: official;
+    .bit-ldn-Spinner {
         display: inline-block;
         position: relative;
         width: @(Size)px;
         height: @(Size)px;
     }
 
-        .blazor-loading-spinner div {
+        .bit-ldn-Spinner div {
             transform-origin: @(Convert(40))px @(Convert(40))px;
-            animation: blazor-loading-spinner 1.2s linear infinite;
+            animation: bit-ldn-Spinner 1.2s linear infinite;
         }
 
-            .blazor-loading-spinner div:after {
+            .bit-ldn-Spinner div:after {
                 content: " ";
                 display: block;
                 position: absolute;
@@ -27,67 +26,67 @@
                 background: @Color;
             }
 
-            .blazor-loading-spinner div:nth-child(1) {
+            .bit-ldn-Spinner div:nth-child(1) {
                 transform: rotate(0deg);
                 animation-delay: -1.1s;
             }
 
-            .blazor-loading-spinner div:nth-child(2) {
+            .bit-ldn-Spinner div:nth-child(2) {
                 transform: rotate(30deg);
                 animation-delay: -1s;
             }
 
-            .blazor-loading-spinner div:nth-child(3) {
+            .bit-ldn-Spinner div:nth-child(3) {
                 transform: rotate(60deg);
                 animation-delay: -0.9s;
             }
 
-            .blazor-loading-spinner div:nth-child(4) {
+            .bit-ldn-Spinner div:nth-child(4) {
                 transform: rotate(90deg);
                 animation-delay: -0.8s;
             }
 
-            .blazor-loading-spinner div:nth-child(5) {
+            .bit-ldn-Spinner div:nth-child(5) {
                 transform: rotate(120deg);
                 animation-delay: -0.7s;
             }
 
-            .blazor-loading-spinner div:nth-child(6) {
+            .bit-ldn-Spinner div:nth-child(6) {
                 transform: rotate(150deg);
                 animation-delay: -0.6s;
             }
 
-            .blazor-loading-spinner div:nth-child(7) {
+            .bit-ldn-Spinner div:nth-child(7) {
                 transform: rotate(180deg);
                 animation-delay: -0.5s;
             }
 
-            .blazor-loading-spinner div:nth-child(8) {
+            .bit-ldn-Spinner div:nth-child(8) {
                 transform: rotate(210deg);
                 animation-delay: -0.4s;
             }
 
-            .blazor-loading-spinner div:nth-child(9) {
+            .bit-ldn-Spinner div:nth-child(9) {
                 transform: rotate(240deg);
                 animation-delay: -0.3s;
             }
 
-            .blazor-loading-spinner div:nth-child(10) {
+            .bit-ldn-Spinner div:nth-child(10) {
                 transform: rotate(270deg);
                 animation-delay: -0.2s;
             }
 
-            .blazor-loading-spinner div:nth-child(11) {
+            .bit-ldn-Spinner div:nth-child(11) {
                 transform: rotate(300deg);
                 animation-delay: -0.1s;
             }
 
-            .blazor-loading-spinner div:nth-child(12) {
+            .bit-ldn-Spinner div:nth-child(12) {
                 transform: rotate(330deg);
                 animation-delay: 0s;
             }
 
-    @@keyframes blazor-loading-spinner {
+    @@keyframes bit-ldn-Spinner {
         0% {
             opacity: 1;
         }
@@ -97,4 +96,10 @@
         }
     }
 </style>
-<div class="blazor-loading-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
\ No newline at end of file
+
+<div style="@Style" class="bit-ldn-Spinner @Class">
+    @for (int i = 0; i < 12; i++)
+    {
+        <div style="@ChildStyle" class="@ChildClass"></div>
+    }
+</div>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Loading/BitLoadingDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Loading/BitLoadingDemo.razor.cs
index a03559e24b..11df34c581 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Loading/BitLoadingDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Loading/BitLoadingDemo.razor.cs
@@ -6,10 +6,24 @@ public partial class BitLoadingDemo
     {
         new()
         {
-            Name = "Size",
-            Type = "int",
-            DefaultValue = "64",
-            Description = "The Size of the loading component in px."
+            Name = "ChildClass",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Custom CSS class for the root element of the component.",
+        },
+        new()
+        {
+            Name = "ChildStyle",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Custom CSS style for the root element of the component.",
+        },
+        new()
+        {
+            Name = "Class",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Custom CSS class for the root element of the component.",
         },
         new()
         {
@@ -17,6 +31,20 @@ public partial class BitLoadingDemo
             Type = "string",
             DefaultValue = "#FFFFFF",
             Description = "The Color of the loading component compatible with colors in CSS."
+        },
+        new()
+        {
+            Name = "Size",
+            Type = "int",
+            DefaultValue = "64",
+            Description = "The Size of the loading component in px."
+        },
+        new()
+        {
+            Name = "Style",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "Custom CSS style for the root element of the component.",
         }
     };