Loading fixes

1 files changed, 43 insertions, 9 deletions

diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 726c2cba..964890c2 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -58,12 +58,14 @@ img, hr {
     transition: margin-left 0.4s;
     overflow-x: hidden;
 }
+
 #header_wrapper, .footer_container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
 }
+
 #sidebar {
     color: #222;
     transition: width 0.4s;
@@ -90,7 +92,7 @@ img, hr {
     width: 100%;
     margin-top: 12px;
     overflow-x: hidden;
-    transition: margin-left 0.4s;   
+    transition: margin-left 0.4s;
 }
 
 #footer {
@@ -144,8 +146,7 @@ img, hr {
     display: flex;
 }
 
-#global a,
-#ctitle a {
+#global a, #ctitle a {
     display: flex;
     align-items: center;
     border-bottom: 2px solid transparent;
@@ -156,7 +157,7 @@ img, hr {
     padding: 14px 16px;
 }
 
-#sidebar > a {
+#sidebar>a {
     color: #88958d;
     border-right: 2px solid transparent;
     display: flex;
@@ -164,7 +165,8 @@ img, hr {
     align-items: center;
     vertical-align: middle;
 }
-#sidebar > a:hover {
+
+#sidebar>a:hover {
     background-color: #f8f8f8;
     border-right: 2px solid #ff339a;
     cursor: pointer;
@@ -174,10 +176,7 @@ img, hr {
     padding: 2px 20px;
 }
 
-#global a:hover,
-#ctitle a:hover,
-.l a:hover
-.msg-button:hover {
+#global a:hover, #ctitle a:hover, .l a:hover .msg-button:hover {
     background-color: #f8f8f8;
     border-bottom: 2px solid #ff339a;
     cursor: pointer;
@@ -196,6 +195,41 @@ img, hr {
     border-radius: 0;
 }
 
+.lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+}
+
+.lds-ripple div {
+    position: absolute;
+    border: 4px solid #ff339a;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+    0% {
+        top: 28px;
+        left: 28px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+    100% {
+        top: -1px;
+        left: -1px;
+        width: 58px;
+        height: 58px;
+        opacity: 0;
+    }
+}
 
 @media (--viewport-desktop) {
     #app {