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>Loading Animation Replica</title>
7<style>
8 :root{
9 --bg:#ef4b3a;
10 --fg:#fff;
11 --line-h:5px;
12 --gap:22px;
13 --line-max:152px;
14 --text-size:18px;
15 --dur:2.8s;
16 }
17
18 html,body{
19 margin:0;
20 width:100%;
21 height:100%;
22 overflow:hidden;
23 background:var(--bg);
24 font-family: Georgia, "Times New Roman", serif;
25 }
26
27 .stage{
28 position:relative;
29 width:100vw;
30 height:100vh;
31 background:var(--bg);
32 }
33
34 .loader{
35 position:absolute;
36 left:50%;
37 top:68px;
38 transform:translateX(-50%);
39 width:260px;
40 height:64px;
41 }
42
43 .text{
44 position:absolute;
45 left:50%;
46 top:50%;
47 transform:translate(-50%,-50%);
48 color:var(--fg);
49 font-size:var(--text-size);
50 line-height:1;
51 letter-spacing:0;
52 white-space:nowrap;
53 z-index:2;
54 }
55
56 .line{
57 position:absolute;
58 left:50%;
59 width:var(--line-max);
60 height:var(--line-h);
61 transform:translateX(-50%);
62 overflow:hidden;
63 z-index:1;
64 }
65
66 .line.top{ top:14px; }
67 .line.bottom{ bottom:14px; }
68
69 .line::before{
70 content:"";
71 position:absolute;
72 left:0;
73 top:0;
74 height:100%;
75 background:var(--fg);
76 width:0;
77 animation:grow var(--dur) linear infinite;
78 }
79
80 .line.bottom::before{
81 animation-delay:0.06s;
82 }
83
84 @keyframes grow{
85 0% { width:0; }
86 8% { width:1px; }
87 14% { width:6px; }
88 22% { width:14px; }
89 32% { width:26px; }
90 44% { width:40px; }
91 56% { width:58px; }
92 68% { width:76px; }
93 80% { width:98px; }
94 90% { width:124px; }
95 100% { width:var(--line-max); }
96 }
97</style>
98</head>
99<body>
100 <div class="stage">
101 <div class="loader">
102 <div class="line top"></div>
103 <div class="text">LOADING ...</div>
104 <div class="line bottom"></div>
105 </div>
106 </div>
107</body>
108</html>