diff --git a/src/styles/components/loader.css b/src/styles/components/loader.less
similarity index 63%
rename from src/styles/components/loader.css
rename to src/styles/components/loader.less
index a707e60..652c784 100644
--- a/src/styles/components/loader.css
+++ b/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 {
-    position: absolute;
-    border: 4px solid rgb(226, 29, 29);
-    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;
+
+    & div {
+        position: absolute;
+        border: 4px solid @loader-color;
+        opacity: 1;
+        border-radius: 50%;
+        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    }
+
+    & 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-fill {
+        height: 100%;
+        width: 100%;
+    }
 }
 
-.loader-content.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;
 }
diff --git a/src/styles/pages/App.less b/src/styles/pages/App.less
index 28cfdd4..d48a67e 100644
--- a/src/styles/pages/App.less
+++ b/src/styles/pages/App.less
@@ -1,4 +1,4 @@
-@import '../components/loader.css';
+@import '../components/loader.less';
 
 #root, .app{
     min-height:100%;