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>Rotating Gradient Arc Loader</title>
7<style>
8 :root{
9 --bg:#f7f5ee;
10 --size:64px;
11 --stroke:20px;
12 --dur:1.15s;
13 }
14
15 html,body{
16 margin:0;
17 width:100%;
18 height:100%;
19 overflow:hidden;
20 background:var(--bg);
21 }
22
23 body{
24 display:grid;
25 place-items:center;
26 }
27
28 .loader{
29 width:var(--size);
30 height:var(--size);
31 display:block;
32 transform-origin:50% 50%;
33 animation: spin var(--dur) linear infinite;
34 filter: saturate(1.05);
35 }
36
37 .arc{
38 fill:none;
39 stroke:url(#grad);
40 stroke-width:var(--stroke);
41 stroke-linecap:round;
42 stroke-dasharray:58 160; /* short rounded arc */
43 animation: morph var(--dur) cubic-bezier(.45,.05,.55,.95) infinite;
44 }
45
46 /* subtle soft trailing highlight visible in frames */
47 .ghost{
48 fill:none;
49 stroke:rgba(180, 190, 255, .28);
50 stroke-width:calc(var(--stroke) - 2px);
51 stroke-linecap:round;
52 stroke-dasharray:58 160;
53 transform-origin:50% 50%;
54 animation:
55 morph var(--dur) cubic-bezier(.45,.05,.55,.95) infinite,
56 lag var(--dur) linear infinite;
57 filter: blur(.35px);
58 }
59
60 @keyframes spin{
61 from{ transform:rotate(0deg); }
62 to{ transform:rotate(360deg); }
63 }
64
65 /* starts as a tiny rounded square/dot, then becomes the curved segment */
66 @keyframes morph{
67 0%, 8%{
68 stroke-dasharray:1 220;
69 stroke-dashoffset:0;
70 }
71 16%{
72 stroke-dasharray:18 220;
73 stroke-dashoffset:-2;
74 }
75 28%, 100%{
76 stroke-dasharray:58 160;
77 stroke-dashoffset:-6;
78 }
79 }
80
81 @keyframes lag{
82 from{ transform:rotate(8deg); opacity:.22; }
83 to{ transform:rotate(368deg); opacity:.22; }
84 }
85
86 svg{
87 overflow:visible;
88 }
89</style>
90</head>
91<body>
92 <svg class="loader" viewBox="0 0 100 100" aria-label="Loading">
93 <defs>
94 <linearGradient id="grad" x1="18" y1="72" x2="82" y2="28" gradientUnits="userSpaceOnUse">
95 <stop offset="0%" stop-color="#ff5a5f"/>
96 <stop offset="52%" stop-color="#c44fa0"/>
97 <stop offset="100%" stop-color="#5b5cff"/>
98 </linearGradient>
99 </defs>
100
101 <circle class="ghost" cx="50" cy="50" r="28"></circle>
102 <circle class="arc" cx="50" cy="50" r="28"></circle>
103 </svg>
104</body>
105</html>