Skip to content

Commit db46191

Browse files
codeaashucodeaashu
committed
add GsocLoader component for enhanced loading animation on GSoC page
1 parent 29e5a72 commit db46191

File tree

2 files changed

+171
-13
lines changed

2 files changed

+171
-13
lines changed

‎src/Page/OpportunitiesHub/opensource/gsoc.jsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import GsocLoader from '../../../components/GsocLoader';
23

34
const proposals = [
45
{
@@ -394,23 +395,21 @@ export default function GsocPage() {
394395
</div>
395396
<div className="relative z-10 mx-auto grid max-w-6xl items-center gap-8 sm:gap-10 md:grid-cols-2 md:gap-12">
396397
<div className="space-y-4 text-center md:text-left">
397-
<p className="text-base font-semibold tracking-wide text-slate-200 sm:text-lg">
398+
<p className="text-xl font-semibold tracking-wide text-slate-200 sm:text-3xl">
398399
Everything You Need to Decode
399400
</p>
400-
<h1 className="text-5xl font-black leading-tight text-white sm:text-6xl lg:text-7xl">
401-
<span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
402-
GSoC 2026
403-
</span>
404-
</h1>
401+
<div className="flex justify-center md:justify-start">
402+
<div className="relative overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 shadow-2xl">
403+
<img
404+
src="/assets/opensourceProgram/GSOC.png"
405+
alt="Google Summer of Code 2026"
406+
className="h-auto w-full object-cover"
407+
/>
408+
</div>
409+
</div>
405410
</div>
406411

407-
<div className="relative overflow-hidden rounded-3xl border border-slate-800 bg-slate-900 shadow-2xl">
408-
<img
409-
src="/assets/opensourceProgram/GSOC.png"
410-
alt="Google Summer of Code 2026"
411-
className="h-auto w-full object-cover"
412-
/>
413-
</div>
412+
<GsocLoader />
414413
</div>
415414
</section>
416415

‎src/components/GsocLoader.jsx‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
const GsocLoader = () => {
5+
return (
6+
<StyledWrapper>
7+
<div className="loader-wrapper">
8+
<span className="loader-letter">G</span>
9+
<span className="loader-letter">S</span>
10+
<span className="loader-letter">o</span>
11+
<span className="loader-letter">C</span>
12+
<span className="loader-letter">&nbsp;</span>
13+
<span className="loader-letter">2</span>
14+
<span className="loader-letter">0</span>
15+
<span className="loader-letter">2</span>
16+
<span className="loader-letter">6</span>
17+
<div className="loader" />
18+
</div>
19+
</StyledWrapper>
20+
);
21+
};
22+
23+
const StyledWrapper = styled.div`
24+
/* Container to reserve space for the scaled element */
25+
min-height: 240px;
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
30+
.loader-wrapper {
31+
position: relative;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
height: 120px;
36+
width: auto;
37+
/* margin: 2rem; Removed to prevent excessive spacing when scaled */
38+
39+
font-family: 'Poppins', sans-serif;
40+
font-size: 1.6em;
41+
font-weight: 600;
42+
user-select: none;
43+
color: #fff;
44+
45+
scale: 2;
46+
}
47+
48+
.loader {
49+
position: absolute;
50+
top: 0;
51+
left: 0;
52+
height: 100%;
53+
width: 100%;
54+
z-index: 1;
55+
56+
background-color: transparent;
57+
mask: repeating-linear-gradient(90deg, transparent 0, transparent 6px, black 7px, black 8px);
58+
}
59+
60+
.loader::after {
61+
content: '';
62+
position: absolute;
63+
top: 0;
64+
left: 0;
65+
width: 100%;
66+
height: 100%;
67+
68+
background-image:
69+
radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%),
70+
radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%),
71+
radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
72+
radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
73+
radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
74+
mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 10%, black 25%);
75+
animation:
76+
transform-animation 2s infinite alternate,
77+
opacity-animation 4s infinite;
78+
animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
79+
}
80+
81+
@keyframes transform-animation {
82+
0% {
83+
transform: translate(-55%);
84+
}
85+
100% {
86+
transform: translate(55%);
87+
}
88+
}
89+
90+
@keyframes opacity-animation {
91+
0%,
92+
100% {
93+
opacity: 0;
94+
}
95+
15% {
96+
opacity: 1;
97+
}
98+
65% {
99+
opacity: 0;
100+
}
101+
}
102+
103+
.loader-letter {
104+
display: inline-block;
105+
opacity: 0;
106+
animation: loader-letter-anim 4s infinite linear;
107+
z-index: 2;
108+
}
109+
110+
.loader-letter:nth-child(1) {
111+
animation-delay: 0.1s;
112+
}
113+
.loader-letter:nth-child(2) {
114+
animation-delay: 0.205s;
115+
}
116+
.loader-letter:nth-child(3) {
117+
animation-delay: 0.31s;
118+
}
119+
.loader-letter:nth-child(4) {
120+
animation-delay: 0.415s;
121+
}
122+
.loader-letter:nth-child(5) {
123+
animation-delay: 0.521s;
124+
}
125+
.loader-letter:nth-child(6) {
126+
animation-delay: 0.626s;
127+
}
128+
.loader-letter:nth-child(7) {
129+
animation-delay: 0.731s;
130+
}
131+
.loader-letter:nth-child(8) {
132+
animation-delay: 0.837s;
133+
}
134+
.loader-letter:nth-child(9) {
135+
animation-delay: 0.942s;
136+
}
137+
.loader-letter:nth-child(10) {
138+
animation-delay: 1.047s;
139+
}
140+
141+
@keyframes loader-letter-anim {
142+
0% {
143+
opacity: 0;
144+
}
145+
5% {
146+
opacity: 1;
147+
text-shadow: 0 0 4px #fff;
148+
transform: scale(1.1) translateY(-2px);
149+
}
150+
20% {
151+
opacity: 0.2;
152+
}
153+
100% {
154+
opacity: 0;
155+
}
156+
}
157+
`;
158+
159+
export default GsocLoader;

0 commit comments

Comments
 (0)