Skip to content

Commit a7cd961

Browse files
fab-c14LaurelineP
fab-c14
and
LaurelineP
authored
Add wifi signal animation by fab-c14 (#2995)
* Add Pulsing Rings animation by fab-c14 * Update and rename PulseRings.css to index.css * Update and rename index.css to style.css * Update and rename PulseRings.html to index.html * Change stylesheet link in index.html Updated the stylesheet link from 'PulseRings.css' to 'style.css'. * Update index.html * Fix stylesheet link in index.html Updated the stylesheet link from './style.css' to './styles.css'. * Fix JSON formatting in meta.json * Update and rename style.css to styles.css * added fab-c14-wifi-signal animation --------- Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent 4ccb28a commit a7cd961

3 files changed

Lines changed: 113 additions & 0 deletions

File tree

‎Art/fabc14-wifi-signal/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
<title>Animated WiFi Signal</title>
7+
<link rel="stylesheet" href="styles.css"/>
8+
</head>
9+
<body>
10+
<div class="wifi-container">
11+
<div class="wifi-dot"></div>
12+
<div class="wifi-bar bar1"></div>
13+
<div class="wifi-bar bar2"></div>
14+
<div class="wifi-bar bar3"></div>
15+
</div>
16+
</body>
17+
</html>

‎Art/fabc14-wifi-signal/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"githubHandle": "fab-c14",
3+
"artName": "WiFi Signal"
4+
}

‎Art/fabc14-wifi-signal/styles.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
body {
2+
min-height: 100vh;
3+
background: #1a1a2e;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
margin: 0;
8+
}
9+
10+
.wifi-container {
11+
position: relative;
12+
width: 140px;
13+
height: 140px;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
19+
.wifi-dot {
20+
position: absolute;
21+
bottom: 30px;
22+
left: 50%;
23+
width: 16px;
24+
height: 16px;
25+
background: #43e97b;
26+
border-radius: 50%;
27+
transform: translateX(-50%);
28+
box-shadow: 0 0 10px #43e97b99;
29+
animation: dotPulse 2.2s infinite;
30+
}
31+
32+
@keyframes dotPulse {
33+
0%, 100% { box-shadow: 0 0 10px #43e97b99; }
34+
50% { box-shadow: 0 0 22px #43e97b; }
35+
}
36+
37+
.wifi-bar {
38+
position: absolute;
39+
left: 50%;
40+
border-radius: 70px 70px 0 0;
41+
border: 7px solid transparent;
42+
border-bottom: none;
43+
transform: translateX(-50%) scaleX(1.03);
44+
opacity: 0.7;
45+
}
46+
47+
.bar1 {
48+
bottom: 24px;
49+
width: 42px;
50+
height: 30px;
51+
border-top: 7px solid #43e97b;
52+
z-index: 3;
53+
animation: bar1Anim 2.2s infinite;
54+
}
55+
.bar2 {
56+
bottom: 10px;
57+
width: 74px;
58+
height: 54px;
59+
border-top: 7px solid #38f9d7;
60+
z-index: 2;
61+
animation: bar2Anim 2.2s infinite;
62+
}
63+
.bar3 {
64+
bottom: -10px;
65+
width: 110px;
66+
height: 82px;
67+
border-top: 7px solid #ff6ec4;
68+
z-index: 1;
69+
animation: bar3Anim 2.2s infinite;
70+
}
71+
72+
@keyframes bar1Anim {
73+
0%, 100% { opacity: 0.2; transform: translateX(-50%) scaleX(0.9);}
74+
10% { opacity: 0.7; transform: translateX(-50%) scaleX(1.05);}
75+
20% { opacity: 1; transform: translateX(-50%) scaleX(1.1);}
76+
40% { opacity: 0.7; transform: translateX(-50%) scaleX(1.05);}
77+
60%, 100% { opacity: 0.2; transform: translateX(-50%) scaleX(0.9);}
78+
}
79+
@keyframes bar2Anim {
80+
0%, 18%, 100% { opacity: 0.12; transform: translateX(-50%) scaleX(0.85);}
81+
22% { opacity: 0.5; transform: translateX(-50%) scaleX(1);}
82+
36% { opacity: 0.9; transform: translateX(-50%) scaleX(1.1);}
83+
52% { opacity: 0.5; transform: translateX(-50%) scaleX(1);}
84+
72%, 100% { opacity: 0.12; transform: translateX(-50%) scaleX(0.85);}
85+
}
86+
@keyframes bar3Anim {
87+
0%, 38%, 100% { opacity: 0.08; transform: translateX(-50%) scaleX(0.8);}
88+
44% { opacity: 0.3; transform: translateX(-50%) scaleX(1);}
89+
62% { opacity: 0.6; transform: translateX(-50%) scaleX(1.08);}
90+
80% { opacity: 0.3; transform: translateX(-50%) scaleX(1);}
91+
100% { opacity: 0.08; transform: translateX(-50%) scaleX(0.8);}
92+
}

0 commit comments

Comments
 (0)