Skip to content

Commit 0dd1427

Browse files
committed
Files Uploaded
1 parent 6ce953b commit 0dd1427

File tree

2 files changed

+64
-0
lines changed

2 files changed

+64
-0
lines changed

Loaders/01/index.html

+17
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 http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<div class="loader">
12+
<div class="bar bar-1"></div>
13+
<div class="bar bar-2"></div>
14+
<div class="bar bar-3"></div>
15+
</div>
16+
</body>
17+
</html>

Loaders/01/style.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
background-color: #090909;
10+
display: grid;
11+
place-items: center;
12+
}
13+
14+
.loader {
15+
position: absolute;
16+
display: flex;
17+
align-items: center;
18+
gap: 8px;
19+
}
20+
21+
.bar {
22+
width: 15px;
23+
height: 35px;
24+
background-color: #3bcbdb;
25+
animation: loading 0.8s infinite ease-in-out;
26+
}
27+
28+
.bar-1 {
29+
animation-delay: 0.15s;
30+
}
31+
.bar-2 {
32+
animation-delay: 0.3s;
33+
}
34+
.bar-3 {
35+
animation-delay: 0.45s;
36+
}
37+
38+
@keyframes loading {
39+
0%,
40+
80%,
41+
100% {
42+
height: 32px;
43+
}
44+
40% {
45+
height: 52px;
46+
}
47+
}

0 commit comments

Comments
 (0)