made new styled loader circle

.env.development

@@ -1,3 +1,3 @@
 #REACT_APP_API_HOST=http://localhost:3334/
-REACT_APP_API_HOST=https://pig.vault48.org/
+REACT_APP_API_HOST=https://pig.staging.vault48.org/
-REACT_APP_REMOTE_CURRENT=https://pig.vault48.org/static/
+REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/

src/components/input/LoaderCircle/styles.module.scss

@@ -21,6 +21,6 @@
 }
 
 .wrap {
-  animation: spin infinite 1s linear;
+  //animation: spin infinite 1s linear;
   display: inline-flex;
 }

src/components/input/LoaderCircleInner/styles.module.scss

@@ -1,5 +1,36 @@
+@import "~/styles/variables";
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 .icon {
   fill: currentColor;
   stroke: none;
 }
+
+.e0 {
+  animation: spin infinite linear 2s;
+  transform-origin: 50% 50%;
+  opacity: 0.1;
+}
+
+.e1 {
+  animation: spin infinite reverse 2s -0.25s;
+  transform-origin: 50% 50%;
+  opacity: 0.1;
+}
+.e2 {
+  animation: spin infinite linear 2s -0.25s;
+  transform-origin: 50% 50%;
+  opacity: 0.1;
+}
+
+.e {
+  opacity: 0.1;
+}

src/layouts/BorisLayout/index.tsx

@@ -29,6 +29,7 @@ import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { BorisContactItem } from '~/components/boris/BorisContactItem';
 import { BorisContacts } from '~/components/boris/BorisContacts';
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 type IProps = {};