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:#ef4b3a;
10 --dot-active:#ffffff;
11 --dot-inactive:rgba(255,255,255,.45);
12 --size:12px;
13 --gap:13px;
14 --duration:1.2s;
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 top:62px;
36 left:50%;
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-inactive);
48 animation: pulse var(--duration) linear infinite;
49 }
50
51 .dot:nth-child(1){ animation-delay:0s; }
52 .dot:nth-child(2){ animation-delay:.4s; }
53 .dot:nth-child(3){ animation-delay:.8s; }
54
55 @keyframes pulse{
56 0%, 26%, 100%{
57 background:var(--dot-inactive);
58 transform:scale(1);
59 }
60 33%, 60%{
61 background:var(--dot-active);
62 transform:scale(1);
63 }
64 }
65</style>
66</head>
67<body>
68 <div class="stage">
69 <div class="loader" aria-label="Loading" role="status">
70 <span class="dot"></span>
71 <span class="dot"></span>
72 <span class="dot"></span>
73 </div>
74 </div>
75</body>
76</html>