[Loader] 로딩 컴포넌트 추가
Detail Notes : 1. 데이터 지연시 나타나는 Loader 컴포넌트 추가
This commit is contained in:
jangheon Pyo
14
com.twin.app.shoptime/src/components/Loader/Loader.jsx
Normal file
14
com.twin.app.shoptime/src/components/Loader/Loader.jsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
import css from './Loader.module.less';
|
||||
|
||||
export default function Loader({ isLoading }) {
|
||||
if (!isLoading) return null;
|
||||
return (
|
||||
<div className={css.loaderContainer}>
|
||||
<div className={css.loaderBox}>
|
||||
<div className={css.loader}></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
230
com.twin.app.shoptime/src/components/Loader/Loader.module.less
Normal file
230
com.twin.app.shoptime/src/components/Loader/Loader.module.less
Normal file
@@ -0,0 +1,230 @@
|
||||
.loaderContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
> .loaderBox {
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
z-index: 3;
|
||||
> .loader {
|
||||
font-size: 30px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 50% auto 0;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
-webkit-animation: mulShdSpin 1.2s infinite ease;
|
||||
animation: mulShdSpin 1.2s infinite ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mulShdSpin {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em #000,
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0em -2.6em 0em 0em #000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
|
||||
2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
|
||||
0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
12.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
|
||||
1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
|
||||
1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
25% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000,
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000,
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
37.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
50% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000,
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000,
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
62.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
75% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000,
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000,
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
87.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em -1.8em 0 0em #000000;
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em -1.8em 0 0em #000000;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mulShdSpin {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em #000,
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0em -2.6em 0em 0em #000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
|
||||
2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
|
||||
0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
12.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
|
||||
1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
|
||||
1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
25% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000,
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000,
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
37.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
50% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000,
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000,
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
62.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
75% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000,
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000,
|
||||
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
87.5% {
|
||||
-webkit-box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em -1.8em 0 0em #000000;
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
|
||||
-1.8em -1.8em 0 0em #000000;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user