Skip to content

Commit bef4576

Browse files
Shailsharma2604Shailsharma2604
committed
Traffic Light Loader
1 parent 75a1189 commit bef4576

File tree

4 files changed

+272
-1
lines changed

4 files changed

+272
-1
lines changed

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
9191
- [Treeview](#treeview)
9292
- [Twitter Heart Animation](#twitter-heart-animation)
9393
- [Tri Color Loader](#Tri-Color-Loader)
94+
- [Traffic Light Loader](#Traffic-light-loader)
9495
- [Book Animation](#book-animation)
9596
- [Zomato](#zomato)
9697
- [Zoom When Hover](#zoom-when-hover)
@@ -464,7 +465,6 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
464465

465466
---
466467

467-
468468
## <a id="Tri_Color_Loader"></a>Tri Color Loader
469469

470470
[<img src="images/tri_color_loader.gif" height="230" title="Demo">](https://codepen.io/shail2604/pen/raxLgbo)
@@ -473,6 +473,14 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
473473

474474
---
475475

476+
## <a id="Traffic_Light_Loader"></a>Traffic Light Loader
477+
478+
[<img src="images/Traffic_Light_Loader.gif" height="230" title="Demo">](https://codepen.io/shail2604/pen/KwVWWob)
479+
480+
**[⬆ back to top](#quick-links)**
481+
482+
---
483+
476484
## <a id="BookAnimation"></a>Book Animation
477485

478486
[<img src="images/book_animation.gif" height="350" title="Book Animation">](https://codepen.io/Paras-Shenmare/pen/eYxJpQB)

‎Traffic light loader/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Document</title>
8+
</head>
9+
<body><!-- From Uiverse.io by narmesh_sah -->
10+
<div class="loader-container">
11+
<div class="traffic-light">
12+
<div class="light-row">
13+
<div class="light red-light"></div>
14+
</div>
15+
16+
<div class="light-row">
17+
<div class="light yellow-light"></div>
18+
</div>
19+
20+
<div class="light-row">
21+
<div class="light green-light"></div>
22+
</div>
23+
</div>
24+
25+
<div class="loading-status"></div>
26+
</div>
27+
28+
</body>
29+
</html>

‎Traffic light loader/style.css‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
/* From Uiverse.io by narmesh_sah */
2+
.loader-container {
3+
position: relative;
4+
z-index: 1;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
gap: 1rem;
9+
}
10+
11+
.traffic-light {
12+
background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 40%, #1e1e1e 100%);
13+
border: 1px solid rgba(255, 255, 255, 0.08);
14+
border-radius: 28px;
15+
padding: 24px;
16+
box-shadow:
17+
0 40px 80px rgba(0, 0, 0, 0.5),
18+
0 20px 40px rgba(0, 0, 0, 0.3),
19+
0 8px 16px rgba(0, 0, 0, 0.2),
20+
inset 0 2px 0 rgba(255, 255, 255, 0.05),
21+
inset 0 -2px 20px rgba(0, 0, 0, 0.8);
22+
backdrop-filter: blur(20px) saturate(180%);
23+
position: relative;
24+
width: 100px;
25+
}
26+
27+
.light-row {
28+
margin: 18px 0;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
position: relative;
33+
}
34+
35+
.light-row:first-child {
36+
margin-top: 0;
37+
}
38+
39+
.light-row:last-child {
40+
margin-bottom: 0;
41+
}
42+
43+
.light {
44+
width: 40px;
45+
height: 40px;
46+
border-radius: 50%;
47+
position: relative;
48+
overflow: hidden;
49+
border: 2px solid rgba(255, 255, 255, 0.06);
50+
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
51+
}
52+
53+
.light::before {
54+
content: "";
55+
position: absolute;
56+
top: 16px;
57+
left: 20px;
58+
width: 28px;
59+
height: 24px;
60+
background: linear-gradient(
61+
135deg,
62+
rgba(255, 255, 255, 0.15) 0%,
63+
transparent 60%
64+
);
65+
border-radius: 50%;
66+
filter: blur(6px);
67+
opacity: 0.4;
68+
}
69+
70+
.light::after {
71+
content: "";
72+
position: absolute;
73+
inset: 0;
74+
border-radius: 50%;
75+
background: radial-gradient(
76+
circle at 35% 35%,
77+
rgba(255, 255, 255, 0.08) 0%,
78+
transparent 65%
79+
);
80+
}
81+
82+
.red-light {
83+
background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%),
84+
linear-gradient(135deg, #331212, #1a0606);
85+
box-shadow:
86+
inset 0 6px 12px rgba(0, 0, 0, 0.4),
87+
inset 0 -3px 6px rgba(255, 255, 255, 0.02);
88+
animation: redSequence 4s ease-in-out infinite;
89+
}
90+
91+
@keyframes redSequence {
92+
0% {
93+
background: radial-gradient(circle at center, #ff4444 0%, #cc1111 80%),
94+
linear-gradient(135deg, #ff5555, #dd2222);
95+
border-color: rgba(255, 68, 68, 0.25);
96+
box-shadow:
97+
0 0 40px rgba(255, 68, 68, 0.6),
98+
0 0 80px rgba(255, 68, 68, 0.3),
99+
0 0 120px rgba(255, 68, 68, 0.15),
100+
inset 0 3px 6px rgba(255, 255, 255, 0.15),
101+
inset 0 -3px 6px rgba(0, 0, 0, 0.4);
102+
transform: scale(1.05);
103+
}
104+
105+
25%,
106+
75%,
107+
100% {
108+
background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%),
109+
linear-gradient(135deg, #331212, #1a0606);
110+
border-color: rgba(255, 255, 255, 0.06);
111+
box-shadow:
112+
inset 0 6px 12px rgba(0, 0, 0, 0.4),
113+
inset 0 -3px 6px rgba(255, 255, 255, 0.02);
114+
transform: scale(1);
115+
}
116+
}
117+
118+
.yellow-light {
119+
background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%),
120+
linear-gradient(135deg, #333312, #1a1a06);
121+
box-shadow:
122+
inset 0 6px 12px rgba(0, 0, 0, 0.4),
123+
inset 0 -3px 6px rgba(255, 255, 255, 0.02);
124+
animation: yellowSequence 4s ease-in-out infinite;
125+
}
126+
127+
@keyframes yellowSequence {
128+
0%,
129+
50%,
130+
100% {
131+
background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%),
132+
linear-gradient(135deg, #333312, #1a1a06);
133+
border-color: rgba(255, 255, 255, 0.06);
134+
box-shadow:
135+
inset 0 6px 12px rgba(0, 0, 0, 0.4),
136+
inset 0 -3px 6px rgba(255, 255, 255, 0.02);
137+
transform: scale(1);
138+
}
139+
140+
25% {
141+
background: radial-gradient(circle at center, #ffdd44 0%, #cc9900 80%),
142+
linear-gradient(135deg, #ffee55, #ddaa22);
143+
border-color: rgba(255, 221, 68, 0.25);
144+
box-shadow:
145+
0 0 40px rgba(255, 221, 68, 0.6),
146+
0 0 80px rgba(255, 221, 68, 0.3),
147+
0 0 120px rgba(255, 221, 68, 0.15),
148+
inset 0 3px 6px rgba(255, 255, 255, 0.15),
149+
inset 0 -3px 6px rgba(0, 0, 0, 0.4);
150+
transform: scale(1.05);
151+
}
152+
}
153+
154+
.green-light {
155+
background: radial-gradient(circle at center, #152d15 0%, #081a08 80%),
156+
linear-gradient(135deg, #123312, #061a06);
157+
box-shadow:
158+
inset 0 6px 12px rgba(0, 0, 0, 0.4),
159+
inset 0 -3px 6px rgba(255, 255, 255, 0.02);
160+
animation: greenSequence 4s ease-in-out infinite;
161+
}
162+
163+
@keyframes greenSequence {
164+
0%,
165+
25%,
166+
75% {
167+
background: radial-gradient(circle at center, #152d15 0%, #081a08 80%),
168+
linear-gradient(135deg, #123312, #061a06);
169+
border-color: rgba(255, 255, 255, 0.06);
170+
box-shadow:
171+
inset 0 6px 12px rgba(0, 0, 0, 0.4),
172+
inset 0 -3px 6px rgba(255, 255, 255, 0.02);
173+
transform: scale(1);
174+
}
175+
176+
50%,
177+
100% {
178+
background: radial-gradient(circle at center, #44ff44 0%, #11cc11 80%),
179+
linear-gradient(135deg, #55ff55, #22dd22);
180+
border-color: rgba(68, 255, 68, 0.25);
181+
box-shadow:
182+
0 0 40px rgba(68, 255, 68, 0.6),
183+
0 0 80px rgba(68, 255, 68, 0.3),
184+
0 0 120px rgba(68, 255, 68, 0.15),
185+
inset 0 3px 6px rgba(255, 255, 255, 0.15),
186+
inset 0 -3px 6px rgba(0, 0, 0, 0.4);
187+
transform: scale(1.05);
188+
}
189+
}
190+
191+
.loading-status {
192+
font-size: 12px;
193+
color: rgba(255, 255, 255, 0.5);
194+
font-weight: 500;
195+
letter-spacing: 0.5px;
196+
animation: statusUpdate 4s ease-in-out infinite;
197+
}
198+
199+
.loading-status::before {
200+
content: "Initializing red signal...";
201+
animation: textUpdate 4s ease-in-out infinite;
202+
}
203+
204+
@keyframes textUpdate {
205+
0%,
206+
24% {
207+
content: "Initializing red signal...";
208+
}
209+
25%,
210+
49% {
211+
content: "Preparing yellow transition...";
212+
}
213+
50%,
214+
74% {
215+
content: "Activating green protocol...";
216+
}
217+
75%,
218+
100% {
219+
content: "Completing traffic sequence...";
220+
}
221+
}
222+
223+
@keyframes statusUpdate {
224+
0%,
225+
100% {
226+
opacity: 1;
227+
}
228+
12.5%,
229+
37.5%,
230+
62.5%,
231+
87.5% {
232+
opacity: 0.5;
233+
}
234+
}

‎images/Traffic_Light_Loader.gif‎

1.42 MB
Loading

0 commit comments

Comments
 (0)