Merge pull request #18098 from abpframework/liangshiwei/blazor

Fix RadarSpinner component

framework/src/Volo.Abp.AspNetCore.Components.Server.Theming/Bundling/BlazorGlobalStyleContributor.cs

@@ -17,5 +17,6 @@ public class BlazorGlobalStyleContributor : BundleContributor
         context.Files.AddIfNotContains("/_content/Blazorise/blazorise.css");
         context.Files.AddIfNotContains("/_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css");
         context.Files.AddIfNotContains("/_content/Blazorise.Snackbar/blazorise.snackbar.css");
+        context.Files.AddIfNotContains("/_content/Volo.Abp.BlazoriseUI/volo.abp.blazoriseui.css");
     }
 }

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/ComponentsComponentsBundleContributor.cs

@@ -26,5 +26,6 @@ public class ComponentsComponentsBundleContributor : IBundleContributor
         context.Add("_content/Blazorise/blazorise.css");
         context.Add("_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css");
         context.Add("_content/Blazorise.Snackbar/blazorise.snackbar.css");
+        context.Add("_content/Volo.Abp.BlazoriseUI/volo.abp.blazoriseui.css");
     }
 }

framework/src/Volo.Abp.BlazoriseUI/wwwroot/volo.abp.blazoriseui.css

@@ -0,0 +1,60 @@
+.radar-spinner, .radar-spinner * {
+    box-sizing: border-box;
+}
+
+.radar-spinner {
+    height: 60px;
+    width: 60px;
+    position: relative;
+}
+
+.radar-spinner .circle {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    animation: radar-spinner-animation 2s infinite;
+}
+
+.radar-spinner .circle:nth-child(1) {
+    padding: calc(60px * 5 * 2 * 0 / 110);
+    animation-delay: 300ms;
+}
+
+.radar-spinner .circle:nth-child(2) {
+    padding: calc(60px * 5 * 2 * 1 / 110);
+    animation-delay: 300ms;
+}
+
+.radar-spinner .circle:nth-child(3) {
+    padding: calc(60px * 5 * 2 * 2 / 110);
+    animation-delay: 300ms;
+}
+
+.radar-spinner .circle:nth-child(4) {
+    padding: calc(60px * 5 * 2 * 3 / 110);
+    animation-delay: 0ms;
+}
+
+.radar-spinner .circle-inner, .radar-spinner .circle-inner-container {
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    border: calc(60px * 5 / 110) solid transparent;
+}
+
+.radar-spinner .circle-inner {
+    border-left-color: var(--secondary, #ff1d5e);
+    border-right-color: var(--secondary, #ff1d5e);
+}
+
+@keyframes radar-spinner-animation {
+    50% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(0deg);
+    }
+}