File tree 2 files changed +64
-0
lines changed
2 files changed +64
-0
lines changed Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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
+ }
You can’t perform that action at this time.
0 commit comments