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:#fff;
13 --w:151px;
14 --h:21px;
15 --dur:2.2s;
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 body{
28 position:relative;
29 }
30
31 .loader{
32 position:absolute;
33 left:50%;
34 top:58px;
35 width:var(--w);
36 height:var(--h);
37 transform:translateX(-50%);
38 background:var(--track);
39 overflow:hidden;
40 }
41
42 .label{
43 position:absolute;
44 inset:0;
45 display:flex;
46 align-items:center;
47 justify-content:center;
48 color:var(--text);
49 font-size:18px;
50 line-height:1;
51 letter-spacing:0;
52 z-index:1;
53 pointer-events:none;
54 mix-blend-mode:normal;
55 text-shadow:0 0 0 rgba(0,0,0,0);
56 }
57
58 .fill{
59 position:absolute;
60 top:0;
61 left:0;
62 height:100%;
63 width:0%;
64 background:linear-gradient(to bottom, #ffffff 0%, #f7f7f7 55%, #ffffff 100%);
65 z-index:2;
66 animation:sweep var(--dur) linear infinite;
67 }
68
69 @keyframes sweep{
70 0% { left:0%; width:0%; }
71 6% { left:0%; width:5%; }
72 16% { left:0%; width:18%; }
73 28% { left:0%; width:40%; }
74 42% { left:0%; width:66%; }
75 56% { left:0%; width:85%; }
76 64% { left:0%; width:98%; }
77 70% { left:0%; width:100%; }
78 76% { left:8%; width:92%; }
79 82% { left:28%; width:72%; }
80 88% { left:56%; width:44%; }
81 93% { left:80%; width:20%; }
82 97% { left:94%; width:6%; }
83 100% { left:100%; width:0%; }
84 }
85</style>
86</head>
87<body>
88 <div class="loader" aria-label="Loading">
89 <div class="label">LOADING ...</div>
90 <div class="fill"></div>
91 </div>
92</body>
93</html>