Added loading spinning Razor component

2 files changed, 25 insertions, 0 deletions

diff --git a/Pages/Component/LoadingSpinner.razor b/Pages/Component/LoadingSpinner.razor
new file mode 100644
index 0000000..63d98af
--- /dev/null
+++ b/Pages/Component/LoadingSpinner.razor
@@ -0,0 +1,13 @@
+<svg width=@Size height=@Size viewBox="0 0 100 100" fill="none">
+  <path d="
+    M 50 5
+    A 45 45 0 0 1 95 50
+    M 50 95
+    A 45 45 0 0 1 5 50
+    " stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
+</svg>
+
+@code {
+    [Parameter]
+    public int Size { get; set; } = 50;
+}
diff --git a/Pages/Component/LoadingSpinner.razor.css b/Pages/Component/LoadingSpinner.razor.css
new file mode 100644
index 0000000..e98347f
--- /dev/null
+++ b/Pages/Component/LoadingSpinner.razor.css
@@ -0,0 +1,12 @@
+svg {
+    animation:        rotate 1s linear infinite;
+    margin:           0 auto 0 auto;
+    padding:          15px;
+    transform-origin: center;
+    will-change:      transform;
+}
+
+@keyframes rotate {
+      0% { transform: rotate(0deg);   }
+    100% { transform: rotate(360deg); }
+}
\ No newline at end of file