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>Two Dot Orbit</title>
7<style>
8 :root{
9 --bg:#ff4a1f;
10 --dot:#f5f5f5;
11 --size:16px;
12 --radius:28px;
13 --duration:1.2s;
14 }
15
16 html,body{
17 margin:0;
18 width:100%;
19 height:100%;
20 overflow:hidden;
21 background:var(--bg);
22 }
23
24 body{
25 display:grid;
26 place-items:center;
27 }
28
29 .loader{
30 position:relative;
31 width:calc(var(--radius) * 2 + var(--size));
32 height:calc(var(--radius) * 2 + var(--size));
33 animation:spin var(--duration) linear infinite;
34 transform-origin:center;
35 }
36
37 .dot{
38 position:absolute;
39 top:50%;
40 left:50%;
41 width:var(--size);
42 height:var(--size);
43 margin:calc(var(--size) / -2);
44 border-radius:50%;
45 background:var(--dot);
46 box-shadow:0 0 0 1px rgba(255,255,255,.08);
47 }
48
49 .dot.a{ transform:translateX(var(--radius)); }
50 .dot.b{ transform:translateX(calc(var(--radius) * -1)); }
51
52 @keyframes spin{
53 from{ transform:rotate(0deg); }
54 to{ transform:rotate(360deg); }
55 }
56
57 /* keep proportions close to the reference on smaller screens */
58 @media (max-width: 600px){
59 :root{
60 --size:12px;
61 --radius:22px;
62 }
63 }
64</style>
65</head>
66<body>
67 <div class="loader" aria-label="loading animation">
68 <div class="dot a"></div>
69 <div class="dot b"></div>
70 </div>
71</body>
72</html>