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>Orbit Dot Loader</title>
7<style>
8 :root{
9 --bg:#563d7c;
10 --size:48px;
11 --stroke:1.5px;
12 --dot:14px;
13 --dur:2.4s;
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:var(--size);
32 height:var(--size);
33 }
34
35 .ring,
36 .dot{
37 position:absolute;
38 inset:0;
39 border-radius:50%;
40 }
41
42 .ring{
43 box-sizing:border-box;
44 border:var(--stroke) solid #18a8e6;
45 opacity:.9;
46 animation:ringColor var(--dur) linear infinite;
47 }
48
49 .dot{
50 width:var(--dot);
51 height:var(--dot);
52 inset:auto;
53 left:50%;
54 top:50%;
55 margin-left:calc(var(--dot) / -2);
56 margin-top:calc(var(--dot) / -2);
57 background:#18a8e6;
58 transform-origin:0 0;
59 animation:
60 orbit var(--dur) linear infinite,
61 dotColor var(--dur) linear infinite;
62 box-shadow:0 0 0 0.5px rgba(255,255,255,.08);
63 }
64
65 @keyframes orbit{
66 from{
67 transform:rotate(180deg) translateX(calc(var(--size) / 2 - var(--dot) / 2));
68 }
69 to{
70 transform:rotate(540deg) translateX(calc(var(--size) / 2 - var(--dot) / 2));
71 }
72 }
73
74 /* Color progression approximates the sampled frames:
75 cyan -> teal/green -> olive/gold -> red/orange -> amber -> cyan */
76 @keyframes ringColor{
77 0% { border-color:#18a8e6; }
78 16% { border-color:#1fb7d8; }
79 30% { border-color:#43c84a; }
80 46% { border-color:#a88a2a; }
81 60% { border-color:#ff3a2f; }
82 74% { border-color:#ff6a24; }
83 86% { border-color:#ffb12a; }
84 100% { border-color:#18a8e6; }
85 }
86
87 @keyframes dotColor{
88 0% { background:#18a8e6; }
89 16% { background:#22b8c8; }
90 30% { background:#4acb3f; }
91 46% { background:#b08d2d; }
92 60% { background:#ff3a2f; }
93 74% { background:#ff6d24; }
94 86% { background:#ffb52a; }
95 100% { background:#18a8e6; }
96 }
97</style>
98</head>
99<body>
100 <div class="loader" aria-label="loading animation">
101 <div class="ring"></div>
102 <div class="dot"></div>
103 </div>
104</body>
105</html>