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 Segment Glow Loader</title>
7<style>
8 :root{
9 --bg-edge:#2b2d31;
10 --bg-mid:#17191d;
11 --bg-core:#050607;
12
13 --off:#55585f;
14 --divider:#2a2d33;
15
16 --pink:#ff12b8;
17 --purple:#9b5cff;
18 --blue:#2aa8ff;
19
20 --w:240px;
21 --h:48px;
22 --seg:80px;
23 --radius:0px;
24 --dur:2.2s;
25 }
26
27 *{box-sizing:border-box}
28 html,body{
29 width:100%;
30 height:100%;
31 margin:0;
32 }
33
34 body{
35 display:grid;
36 place-items:center;
37 overflow:hidden;
38 background:
39 radial-gradient(circle at 50% 50%,
40 var(--bg-core) 0%,
41 #07090b 18%,
42 #101216 38%,
43 #1b1d22 68%,
44 var(--bg-edge) 100%);
45 font-family:system-ui,sans-serif;
46 }
47
48 .loader{
49 position:relative;
50 width:var(--w);
51 height:var(--h);
52 display:flex;
53 filter: saturate(1.05);
54 }
55
56 .seg{
57 position:relative;
58 width:var(--seg);
59 height:100%;
60 background:var(--off);
61 border-radius:var(--radius);
62 animation: fill var(--dur) linear infinite;
63 }
64
65 .seg + .seg{
66 box-shadow: inset 2px 0 0 var(--divider);
67 }
68
69 .seg::before{
70 content:"";
71 position:absolute;
72 inset:-10px;
73 border-radius:12px;
74 opacity:0;
75 filter: blur(10px);
76 animation: glow var(--dur) linear infinite;
77 pointer-events:none;
78 }
79
80 .s1{
81 --c: var(--pink);
82 animation-delay: 0s;
83 }
84 .s1::before{ animation-delay: 0s; }
85
86 .s2{
87 --c: var(--purple);
88 animation-delay: calc(var(--dur) / 6);
89 }
90 .s2::before{ animation-delay: calc(var(--dur) / 6); }
91
92 .s3{
93 --c: var(--blue);
94 animation-delay: calc(var(--dur) / 3);
95 }
96 .s3::before{ animation-delay: calc(var(--dur) / 3); }
97
98 @keyframes fill{
99 0%, 8%{
100 background:var(--off);
101 }
102 18%, 42%{
103 background:color-mix(in srgb, var(--c) 82%, white 6%, black 12%);
104 }
105 58%, 100%{
106 background:var(--off);
107 }
108 }
109
110 @keyframes glow{
111 0%, 8%{
112 opacity:0;
113 background:transparent;
114 transform:scale(0.96);
115 }
116 18%{
117 opacity:.38;
118 background:var(--c);
119 transform:scale(1);
120 }
121 30%{
122 opacity:.48;
123 background:var(--c);
124 transform:scale(1.02);
125 }
126 42%{
127 opacity:.34;
128 background:var(--c);
129 transform:scale(1);
130 }
131 58%, 100%{
132 opacity:0;
133 background:transparent;
134 transform:scale(0.98);
135 }
136 }
137
138 /* subtle center vignette softness */
139 .loader::after{
140 content:"";
141 position:absolute;
142 inset:-28px -34px;
143 background:radial-gradient(circle at center,
144 rgba(0,0,0,0) 0 28%,
145 rgba(0,0,0,.08) 55%,
146 rgba(0,0,0,0) 100%);
147 pointer-events:none;
148 filter:blur(8px);
149 }
150</style>
151</head>
152<body>
153 <div class="loader" aria-label="loading animation">
154 <div class="seg s1"></div>
155 <div class="seg s2"></div>
156 <div class="seg s3"></div>
157 </div>
158</body>
159</html>