qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 커스텀 스피너 추가

Browse Source
This commit is contained in:
yoosangwook 2024-11-28 10:47:47 +09:00
parent 56ea03abf6
commit 1c6aa023a2
2 changed files with 117 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/spinner/GlobalSpinner.jsx
View File

@ -1,7 +1,13 @@
'use client'
import { HashLoader } from 'react-spinners'
import '@/styles/spinner.scss'
export default function GlobalSpinner() {
return <HashLoader />
return (
<>
<div className="spinner-wrap">
<span className="loader"></span>
</div>
</>
)
}

109
src/styles/spinner.scss Normal file
View File

@ -0,0 +1,109 @@
.spinner-wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
.loader {
font-size: 10px;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow:
0em -2.6em 0em 0em #101010,
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.5),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.7),
1.8em -1.8em 0 0em #101010,
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5);
}
25% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.5),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7),
2.5em 0em 0 0em #101010,
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
37.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5),
2.5em 0em 0 0em rgba(16, 16, 16, 0.7),
1.75em 1.75em 0 0em #101010,
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
50% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.5),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.7),
0em 2.5em 0 0em #101010,
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
62.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.5),
0em 2.5em 0 0em rgba(16, 16, 16, 0.7),
-1.8em 1.8em 0 0em #101010,
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
75% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.5),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.7),
-2.6em 0em 0 0em #101010,
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
87.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.5),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.7),
-1.8em -1.8em 0 0em #101010;
}
}
}