loading spinner

one-ware · Oct 30, 2023 · 3dde7b6 · 3dde7b6
1 parent 4578787
commit 3dde7b6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 48 deletions.
diff --git a/demo/OneWare.Demo.Browser/AppBundle/Startup.jpg b/demo/OneWare.Demo.Browser/AppBundle/Startup.jpg
diff --git a/demo/OneWare.Demo.Browser/AppBundle/app.css b/demo/OneWare.Demo.Browser/AppBundle/app.css
@@ -1,65 +1,71 @@
 :root {
-    --sat: env(safe-area-inset-top);
-    --sar: env(safe-area-inset-right);
-    --sab: env(safe-area-inset-bottom);
-    --sal: env(safe-area-inset-left);
+  --sat: env(safe-area-inset-top);
+  --sar: env(safe-area-inset-right);
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
 }
 
 /* HTML styles for the splash screen */
 
 .highlight {
-    color: white;
-    font-size: 2.5rem;
-    display: block;
-}
-
-.icon {
-    opacity: 0.05;
-    height: 35%;
-    width: 35%;
-    position: absolute;
-    background-repeat: no-repeat;
-    right: 0px;
-    bottom: 0px;
-    margin-right: 3%;
-    margin-bottom: 5%;
-    z-index: 5000;
-    background-position: right bottom;
-    pointer-events: none;
+  color: white;
+  font-size: 2.5rem;
+  display: block;
 }
 
 .center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 
 #avalonia-splash {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    color: whitesmoke;
-    background: black;
-    font-family: 'Nunito', sans-serif;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    justify-content: center;
-    align-items: center;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  color: whitesmoke;
+  background: black;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .splash-close {
-    animation: fadeout 1s linear forwards;
+  animation: fadeout 1s linear forwards;
 }
 
-@keyframes fadeout {
-    0% {
-        opacity: 100%;
-    }
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #FFF;
+  border-bottom-color: #009688;
+  border-radius: 50%;
+  display: block;
+  box-sizing: border-box;
+  margin: auto;
+  left: 0;
+  right: 0;
+  animation: rotation 1s linear infinite;
+}
 
-    100% {
-        opacity: 0;
-        visibility: collapse;
-    }
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }
+
+@keyframes fadeout {
+  0% {
+    opacity: 100%;
+  }
+
+  100% {
+    opacity: 0;
+    visibility: collapse;
+  }
+}
diff --git a/demo/OneWare.Demo.Browser/AppBundle/index.html b/demo/OneWare.Demo.Browser/AppBundle/index.html
@@ -16,9 +16,10 @@
     <div id="out">
         <div id="avalonia-splash">
             <div class="center">
-                <h2>
+                <div>
                     <img src="Startup.jpg" alt="OneWare Logo" />
-                </h2>
+                    <div class="loader" />
+                </div>
             </div>
         </div>
     </div>