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>Three Dot Loader</title>
7<style>
8 :root{
9 --bg:#ee4b3a;
10 --dot-dim: rgba(255,255,255,.22);
11 --dot-bright: rgba(255,255,255,.92);
12 --size: 12px;
13 --gap: 13px;
14 --dur: 1.35s;
15 }
16
17 html,body{
18 margin:0;
19 width:100%;
20 height:100%;
21 overflow:hidden;
22 background:var(--bg);
23 font-family:sans-serif;
24 }
25
26 .stage{
27 position:relative;
28 width:100%;
29 height:100%;
30 background:var(--bg);
31 }
32
33 .loader{
34 position:absolute;
35 left:50%;
36 top:8.2%;
37 transform:translateX(-50%);
38 display:flex;
39 align-items:center;
40 gap:var(--gap);
41 }
42
43 .dot{
44 width:var(--size);
45 height:var(--size);
46 border-radius:50%;
47 background:var(--dot-dim);
48 animation: pulse var(--dur) linear infinite;
49 box-sizing:border-box;
50 }
51
52 .dot:nth-child(1){ animation-delay: 0s; }
53 .dot:nth-child(2){ animation-delay: calc(var(--dur) / 3); }
54 .dot:nth-child(3){ animation-delay: calc(var(--dur) * 2 / 3); }
55
56 @keyframes pulse{
57 0%, 20% { background: var(--dot-bright); }
58 33.333%, 100% { background: var(--dot-dim); }
59 }
60</style>
61</head>
62<body>
63 <div class="stage">
64 <div class="loader" aria-label="loading">
65 <div class="dot"></div>
66 <div class="dot"></div>
67 <div class="dot"></div>
68 </div>
69 </div>
70</body>
71</html>