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>Dot Loader Replica</title>
7<style>
8 :root{
9 --bg:#d1006f;
10 --dot:#fff;
11 --small:10px;
12 --big:20px;
13 --gap:15px;
14 --dur:1.15s;
15 }
16
17 html,body{
18 margin:0;
19 width:100%;
20 height:100%;
21 overflow:hidden;
22 background:var(--bg);
23 }
24
25 body{
26 display:grid;
27 place-items:center;
28 font-family:sans-serif;
29 }
30
31 .loader{
32 display:flex;
33 align-items:center;
34 justify-content:center;
35 gap:var(--gap);
36 height:24px;
37 }
38
39 .dot{
40 width:var(--small);
41 height:var(--small);
42 border-radius:50%;
43 background:var(--dot);
44 animation: pulse var(--dur) linear infinite;
45 transform-origin:center;
46 will-change:transform;
47 }
48
49 .dot:nth-child(1){ animation-delay: calc(var(--dur) * -0.80); }
50 .dot:nth-child(2){ animation-delay: calc(var(--dur) * -0.60); }
51 .dot:nth-child(3){ animation-delay: calc(var(--dur) * -0.40); }
52 .dot:nth-child(4){ animation-delay: calc(var(--dur) * -0.20); }
53 .dot:nth-child(5){ animation-delay: 0s; }
54
55 @keyframes pulse{
56 0%, 100% { transform: scale(1); }
57 8% { transform: scale(2); }
58 16% { transform: scale(1); }
59 }
60</style>
61</head>
62<body>
63 <div class="loader" aria-label="Loading">
64 <span class="dot"></span>
65 <span class="dot"></span>
66 <span class="dot"></span>
67 <span class="dot"></span>
68 <span class="dot"></span>
69 </div>
70</body>
71</html>