From 42207a0756bec3adeaf90ecb46ba101cf8646689 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 13 Sep 2021 15:45:50 +0700 Subject: [PATCH] :sparkles: feat: Loading Common --- .../LoadingCommon/LoadingCommon.module.scss | 9 +++++---- .../common/LoadingCommon/LoadingCommon.tsx | 10 ++-------- .../common/LoadingCommon/assets/broccoli.png | Bin 0 -> 2458 bytes .../common/LoadingCommon/assets/carrot.png | Bin 0 -> 2096 bytes 4 files changed, 7 insertions(+), 12 deletions(-) create mode 100644 src/components/common/LoadingCommon/assets/broccoli.png create mode 100644 src/components/common/LoadingCommon/assets/carrot.png diff --git a/src/components/common/LoadingCommon/LoadingCommon.module.scss b/src/components/common/LoadingCommon/LoadingCommon.module.scss index f8bca225d..e1882523c 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.module.scss +++ b/src/components/common/LoadingCommon/LoadingCommon.module.scss @@ -2,12 +2,14 @@ .loadingCommon:empty { @apply bg-white; + height: 7rem; + width: 7rem; border-radius: 50%; - border: .7rem solid var(--primary-lightest); - border-top: .7rem solid var(--primary); animation: spin 2s linear infinite; margin: auto; + background: url('./assets/carrot.png') top 50% left 50% no-repeat; + @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } @@ -19,8 +21,7 @@ } &.default { - height: 7rem; - width: 7rem; + } &.large { diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx index 20377c0ed..79993507e 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.tsx +++ b/src/components/common/LoadingCommon/LoadingCommon.tsx @@ -1,23 +1,17 @@ -import classNames from "classnames"; import React from "react"; import s from './LoadingCommon.module.scss' interface LoadingCommonProps { - size?: "small" | "default" | "large", children? : React.ReactNode; } -const LoadingCommon = ({ size="default", children }: LoadingCommonProps) => { +const LoadingCommon = ({ children }: LoadingCommonProps) => { return ( <> - { -
+
{children}
- } ) } diff --git a/src/components/common/LoadingCommon/assets/broccoli.png b/src/components/common/LoadingCommon/assets/broccoli.png new file mode 100644 index 0000000000000000000000000000000000000000..9080e23362d4408ad522ea8660adc31684f2dff8 GIT binary patch literal 2458 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