Skip to content

Commit 21d53cb

Browse files
hunxjunedohunxjunedo
authored
Merge pull request #68 from React-ChatBotify/login-spinners
Login spinners
2 parents 98c9402 + 00f4d52 commit 21d53cb

File tree

7 files changed

+394
-56
lines changed

7 files changed

+394
-56
lines changed

‎package-lock.json

Lines changed: 35 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"husky": "^8.0.0",
5656
"postcss": "^8.4.38",
5757
"prettier": "^3.3.3",
58+
"sass": "^1.77.8",
5859
"tailwindcss": "^3.4.3",
5960
"vite": "^5.2.10",
6061
"vite-plugin-eslint": "^1.8.1",

‎src/components/LoadingSpinner/LoadingSpinner.module.scss

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
.wrapper {
2+
position: fixed;
3+
top: 50%;
4+
left: 50%;
5+
translate: -50% -50%;
6+
}
7+
.container {
8+
position: relative;
9+
scale: 0.5;
10+
display: block;
11+
width: 70vh;
12+
height: 70vh;
13+
transform-style: preserve-3d;
14+
transform: perspective(1000px) rotateY(45deg) rotateX(45deg);
15+
}
16+
17+
.circle:nth-child(1) {
18+
position: absolute;
19+
background: transparent;
20+
border: 3px solid #fff;
21+
border-radius: 50%;
22+
left: 2.1875vh;
23+
top: 2.1875vh;
24+
width: 65.625vh;
25+
height: 65.625vh;
26+
-webkit-animation: spin 12s infinite linear;
27+
animation: spin 12s infinite linear;
28+
}
29+
.circle:nth-child(2) {
30+
position: absolute;
31+
background: transparent;
32+
border: 3px solid #fff;
33+
border-radius: 50%;
34+
left: 4.375vh;
35+
top: 4.375vh;
36+
width: 61.25vh;
37+
height: 61.25vh;
38+
-webkit-animation: spin 6s infinite linear;
39+
animation: spin 6s infinite linear;
40+
}
41+
.circle:nth-child(3) {
42+
position: absolute;
43+
background: transparent;
44+
border: 3px solid #fff;
45+
border-radius: 50%;
46+
left: 6.5625vh;
47+
top: 6.5625vh;
48+
width: 56.875vh;
49+
height: 56.875vh;
50+
-webkit-animation: spin 4s infinite linear;
51+
animation: spin 4s infinite linear;
52+
}
53+
.circle:nth-child(4) {
54+
position: absolute;
55+
background: transparent;
56+
border: 3px solid #fff;
57+
border-radius: 50%;
58+
left: 8.75vh;
59+
top: 8.75vh;
60+
width: 52.5vh;
61+
height: 52.5vh;
62+
-webkit-animation: spin 3s infinite linear;
63+
animation: spin 3s infinite linear;
64+
}
65+
.circle:nth-child(5) {
66+
position: absolute;
67+
background: transparent;
68+
border: 3px solid #fff;
69+
border-radius: 50%;
70+
left: 10.9375vh;
71+
top: 10.9375vh;
72+
width: 48.125vh;
73+
height: 48.125vh;
74+
-webkit-animation: spin 2.4s infinite linear;
75+
animation: spin 2.4s infinite linear;
76+
}
77+
.circle:nth-child(6) {
78+
position: absolute;
79+
background: transparent;
80+
border: 3px solid #fff;
81+
border-radius: 50%;
82+
left: 13.125vh;
83+
top: 13.125vh;
84+
width: 43.75vh;
85+
height: 43.75vh;
86+
-webkit-animation: spin 2s infinite linear;
87+
animation: spin 2s infinite linear;
88+
}
89+
.circle:nth-child(7) {
90+
position: absolute;
91+
background: transparent;
92+
border: 3px solid #fff;
93+
border-radius: 50%;
94+
left: 15.3125vh;
95+
top: 15.3125vh;
96+
width: 39.375vh;
97+
height: 39.375vh;
98+
-webkit-animation: spin 1.714285714285714s infinite linear;
99+
animation: spin 1.714285714285714s infinite linear;
100+
}
101+
.circle:nth-child(8) {
102+
position: absolute;
103+
background: transparent;
104+
border: 3px solid #fff;
105+
border-radius: 50%;
106+
left: 17.5vh;
107+
top: 17.5vh;
108+
width: 35vh;
109+
height: 35vh;
110+
-webkit-animation: spin 1.5s infinite linear;
111+
animation: spin 1.5s infinite linear;
112+
}
113+
.circle:nth-child(9) {
114+
position: absolute;
115+
background: transparent;
116+
border: 3px solid #fff;
117+
border-radius: 50%;
118+
left: 19.6875vh;
119+
top: 19.6875vh;
120+
width: 30.625vh;
121+
height: 30.625vh;
122+
-webkit-animation: spin 1.333333333333333s infinite linear;
123+
animation: spin 1.333333333333333s infinite linear;
124+
}
125+
.circle:nth-child(10) {
126+
position: absolute;
127+
background: transparent;
128+
border: 3px solid #fff;
129+
border-radius: 50%;
130+
left: 21.875vh;
131+
top: 21.875vh;
132+
width: 26.25vh;
133+
height: 26.25vh;
134+
-webkit-animation: spin 1.2s infinite linear;
135+
animation: spin 1.2s infinite linear;
136+
}
137+
.circle:nth-child(11) {
138+
position: absolute;
139+
background: transparent;
140+
border: 3px solid #fff;
141+
border-radius: 50%;
142+
left: 24.0625vh;
143+
top: 24.0625vh;
144+
width: 21.875vh;
145+
height: 21.875vh;
146+
-webkit-animation: spin 1.090909090909091s infinite linear;
147+
animation: spin 1.090909090909091s infinite linear;
148+
}
149+
.circle:nth-child(12) {
150+
position: absolute;
151+
background: transparent;
152+
border: 3px solid #fff;
153+
border-radius: 50%;
154+
left: 26.25vh;
155+
top: 26.25vh;
156+
width: 17.5vh;
157+
height: 17.5vh;
158+
-webkit-animation: spin 1s infinite linear;
159+
animation: spin 1s infinite linear;
160+
}
161+
.circle:nth-child(13) {
162+
position: absolute;
163+
background: transparent;
164+
border: 3px solid #fff;
165+
border-radius: 50%;
166+
left: 28.4375vh;
167+
top: 28.4375vh;
168+
width: 13.125vh;
169+
height: 13.125vh;
170+
-webkit-animation: spin 0.923076923076923s infinite linear;
171+
animation: spin 0.923076923076923s infinite linear;
172+
}
173+
.circle:nth-child(14) {
174+
position: absolute;
175+
background: transparent;
176+
border: 3px solid #fff;
177+
border-radius: 50%;
178+
left: 30.625vh;
179+
top: 30.625vh;
180+
width: 8.75vh;
181+
height: 8.75vh;
182+
-webkit-animation: spin 0.857142857142857s infinite linear;
183+
animation: spin 0.857142857142857s infinite linear;
184+
}
185+
.circle:nth-child(15) {
186+
position: absolute;
187+
background: transparent;
188+
border: 3px solid #fff;
189+
border-radius: 50%;
190+
left: 32.8125vh;
191+
top: 32.8125vh;
192+
width: 4.375vh;
193+
height: 4.375vh;
194+
-webkit-animation: spin 0.8s infinite linear;
195+
animation: spin 0.8s infinite linear;
196+
}
197+
.circle:nth-child(16) {
198+
position: absolute;
199+
background: transparent;
200+
border: 3px solid #fff;
201+
border-radius: 50%;
202+
left: 35vh;
203+
top: 35vh;
204+
width: 0vh;
205+
height: 0vh;
206+
-webkit-animation: spin 0.75s infinite linear;
207+
animation: spin 0.75s infinite linear;
208+
}
209+
.circle:nth-child(2n) {
210+
border: 3px dashed rgba(255, 255, 255, 0.5);
211+
}
212+
.circle:last-child {
213+
display: none;
214+
}
215+
@-webkit-keyframes spin {
216+
0% {
217+
transform: rotateX(0deg);
218+
}
219+
100% {
220+
transform: rotateX(360deg);
221+
}
222+
}
223+
@keyframes spin {
224+
0% {
225+
transform: rotateX(0deg);
226+
}
227+
100% {
228+
transform: rotateX(360deg);
229+
}
230+
}

‎src/components/LoadingSpinner/LoadingSpinner.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import styles from './LoadingSpinner.module.scss';
2+
const LoadingSpinner = () => {
3+
return (
4+
<div className={styles.wrapper}>
5+
<div className={styles.container}>
6+
<div className={styles.circle}></div>
7+
<div className={styles.circle}></div>
8+
<div className={styles.circle}></div>
9+
<div className={styles.circle}></div>
10+
<div className={styles.circle}></div>
11+
<div className={styles.circle}></div>
12+
<div className={styles.circle}></div>
13+
<div className={styles.circle}></div>
14+
<div className={styles.circle}></div>
15+
<div className={styles.circle}></div>
16+
<div className={styles.circle}></div>
17+
<div className={styles.circle}></div>
18+
<div className={styles.circle}></div>
19+
<div className={styles.circle}></div>
20+
<div className={styles.circle}></div>
21+
<div className={styles.circle}></div>
22+
</div>
23+
</div>
24+
);
25+
}
26+
export default LoadingSpinner;

0 commit comments

Comments
 (0)