Skip to content

Commit 6ba1351

Browse files
afk-anantafk-anant
authored
add Liquid Loading Wave (#3241)
1 parent e7b444d commit 6ba1351

3 files changed

Lines changed: 111 additions & 0 deletions

File tree

‎Art/afk-anant-liquid-loading-wave/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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>Liquid Wave</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="wave-container">
12+
<div class="wave wave1"></div>
13+
<div class="wave wave2"></div>
14+
<div class="wave wave3"></div>
15+
</div>
16+
<div class="percentage">75%</div>
17+
</div>
18+
</body>
19+
</html>

‎Art/afk-anant-liquid-loading-wave/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "liquidwave",
3+
"githubHandle": "afk-anant"
4+
}

‎Art/afk-anant-liquid-loading-wave/styles.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
min-height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13+
font-family: Arial, sans-serif;
14+
}
15+
16+
.container {
17+
position: relative;
18+
width: 250px;
19+
height: 250px;
20+
background: rgba(255, 255, 255, 0.1);
21+
border-radius: 50%;
22+
border: 8px solid rgba(255, 255, 255, 0.2);
23+
overflow: hidden;
24+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
25+
}
26+
27+
.wave-container {
28+
position: absolute;
29+
width: 200%;
30+
height: 200%;
31+
top: 25%;
32+
left: -50%;
33+
}
34+
35+
.wave {
36+
position: absolute;
37+
width: 200%;
38+
height: 200%;
39+
border-radius: 40%;
40+
opacity: 0.8;
41+
animation: wave 8s linear infinite;
42+
}
43+
44+
.wave1 {
45+
background: rgba(255, 255, 255, 0.4);
46+
animation-delay: 0s;
47+
}
48+
49+
.wave2 {
50+
background: rgba(255, 255, 255, 0.3);
51+
animation-delay: -2s;
52+
}
53+
54+
.wave3 {
55+
background: rgba(255, 255, 255, 0.2);
56+
animation-delay: -4s;
57+
}
58+
59+
.percentage {
60+
position: absolute;
61+
top: 50%;
62+
left: 50%;
63+
transform: translate(-50%, -50%);
64+
font-size: 48px;
65+
font-weight: bold;
66+
color: white;
67+
z-index: 10;
68+
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
69+
animation: float 3s ease-in-out infinite;
70+
}
71+
72+
@keyframes wave {
73+
0% {
74+
transform: rotate(0deg);
75+
}
76+
100% {
77+
transform: rotate(360deg);
78+
}
79+
}
80+
81+
@keyframes float {
82+
0%, 100% {
83+
transform: translate(-50%, -50%) translateY(0px);
84+
}
85+
50% {
86+
transform: translate(-50%, -50%) translateY(-10px);
87+
}
88+
}

0 commit comments

Comments
 (0)