Обновлены стили загрузки

src/styles/components/loader.less

@@ -1,20 +1,25 @@
 /* original from https://loading.io/css/ */
 
+@loader-bg: rgba(255, 255, 255, 0.1);
+@loader-color: rgb(226, 29, 29);
+
 .lds-ripple {
     display: inline-block;
     position: absolute;
     width: 80px;
     height: 80px;
-}
-.lds-ripple div {
+
+    & div {
         position: absolute;
-    border: 4px solid rgb(226, 29, 29);
+        border: 4px solid @loader-color;
         opacity: 1;
         border-radius: 50%;
         animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-.lds-ripple div:nth-child(2) {
+    }
+
+    & div:nth-child(2) {
         animation-delay: -0.5s;
+    }
 }
 @keyframes lds-ripple {
     0% {
@@ -33,12 +38,12 @@
     }
 }
 
-.loader-container{
+.loader-container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
 }
 
-.loader-content{
+.loader-content {
     width: 100%;
     height: 100%;
     display: flex;
@@ -46,14 +51,14 @@
     grid-column-start: 1;
     grid-column-end: span 3;
     grid-row-start: 1;
-}
 
-.loader-content.loader-content-fill {
+    &.loader-content-fill {
         height: 100%;
         width: 100%;
+    }
 }
 
-.loader-overlay{
+.loader-overlay {
     grid-column-start: 1;
     grid-column-end: span 3;
     grid-row-start: 1;
@@ -66,13 +71,13 @@
     border-radius: 40px;
 }
 
-.loader-fade{
+.loader-fade {
     grid-column-start: 1;
     grid-column-end: span 3;
     grid-row-start: 1;
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: @loader-bg;
     align-self: stretch;
     justify-self: stretch;
     z-index: 1;
-    box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4);
+    box-shadow: 0px 0px 6px 5px @loader-bg;
 }

src/styles/pages/App.less

@@ -1,4 +1,4 @@
-@import '../components/loader.css';
+@import '../components/loader.less';
 
 #root, .app{
     min-height:100%;