From bcd1094575e6ef20c050c4b42d69617ba622e1a5 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 12 Oct 2021 15:24:26 +0700 Subject: [PATCH] made new styled loader circle --- .env.development | 4 +- .../input/LoaderCircle/styles.module.scss | 2 +- .../input/LoaderCircleInner/index.tsx | 43 +++++++++++++++++-- .../LoaderCircleInner/styles.module.scss | 31 +++++++++++++ src/layouts/BorisLayout/index.tsx | 1 + 5 files changed, 75 insertions(+), 6 deletions(-) diff --git a/.env.development b/.env.development index 589f28a1..cf60c666 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ #REACT_APP_API_HOST=http://localhost:3334/ -REACT_APP_API_HOST=https://pig.vault48.org/ -REACT_APP_REMOTE_CURRENT=https://pig.vault48.org/static/ +REACT_APP_API_HOST=https://pig.staging.vault48.org/ +REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/ diff --git a/src/components/input/LoaderCircle/styles.module.scss b/src/components/input/LoaderCircle/styles.module.scss index 51048769..8f782f6d 100644 --- a/src/components/input/LoaderCircle/styles.module.scss +++ b/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; } diff --git a/src/components/input/LoaderCircleInner/index.tsx b/src/components/input/LoaderCircleInner/index.tsx index c7daef9a..ac00437c 100644 --- a/src/components/input/LoaderCircleInner/index.tsx +++ b/src/components/input/LoaderCircleInner/index.tsx @@ -9,9 +9,46 @@ interface IProps extends SVGAttributes { } const LoaderCircleInner: FC = ({ size, className, ...props }) => ( - - - + + + + + + + + + + + + ); diff --git a/src/components/input/LoaderCircleInner/styles.module.scss b/src/components/input/LoaderCircleInner/styles.module.scss index 6d50b1ca..cba98b66 100644 --- a/src/components/input/LoaderCircleInner/styles.module.scss +++ b/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; +} diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx index 20395358..138edca5 100644 --- a/src/layouts/BorisLayout/index.tsx +++ b/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 = {};