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 Sweep</title>
7<style>
8 :root{
9 --bg:#ef4b3a;
10 --track:rgba(255,255,255,.22);
11 --fill:#fff;
12 --text:rgba(255,255,255,.92);
13 --w:152px;
14 --h:20px;
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 width:100%;
29 height:100%;
30 position:relative;
31 }
32
33 .loader{
34 position:absolute;
35 left:50%;
36 top:58px;
37 transform:translateX(-50%);
38 width:var(--w);
39 height:var(--h);
40 background:var(--track);
41 overflow:hidden;
42 }
43
44 .fill{
45 position:absolute;
46 inset:0 auto 0 0;
47 width:0%;
48 background:var(--fill);
49 animation:fillBar var(--dur) linear infinite;
50 }
51
52 .label{
53 position:absolute;
54 inset:0;
55 display:flex;
56 align-items:center;
57 justify-content:center;
58 color:var(--text);
59 font-size:18px;
60 line-height:1;
61 letter-spacing:0;
62 white-space:nowrap;
63 mix-blend-mode:normal;
64 pointer-events:none;
65 }
66
67 @keyframes fillBar{
68 0% { width:0%; }
69 6% { width:1%; }
70 12% { width:4%; }
71 18% { width:8%; }
72 24% { width:13%; }
73 30% { width:20%; }
74 36% { width:29%; }
75 42% { width:39%; }
76 48% { width:50%; }
77 54% { width:61%; }
78 60% { width:71%; }
79 66% { width:80%; }
80 72% { width:87%; }
81 78% { width:92%; }
82 84% { width:96%; }
83 90% { width:99%; }
84 100% { width:100%; }
85 }
86
87 /* subtle reappearance of text after full white fill, matching the frame sequence */
88 .loader::after{
89 content:"";
90 position:absolute;
91 inset:0;
92 background:var(--track);
93 opacity:0;
94 animation:flashTrack var(--dur) linear infinite;
95 }
96
97 @keyframes flashTrack{
98 0%, 88% { opacity:0; }
99 94%,100% { opacity:1; }
100 }
101</style>
102</head>
103<body>
104 <div class="stage">
105 <div class="loader">
106 <div class="fill"></div>
107 <div class="label">LOADING ...</div>
108 </div>
109 </div>
110</body>
111</html>