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>Orange Loader Ring</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 }
14
15 body {
16 display: grid;
17 place-items: center;
18 background: linear-gradient(180deg, #f7a000 0%, #f8ab12 55%, #f6a313 100%);
19 font-family: sans-serif;
20 }
21
22 .loader {
23 width: 48px;
24 height: 48px;
25 position: relative;
26 transform: translateY(-2px);
27 }
28
29 .ring {
30 width: 100%;
31 height: 100%;
32 border-radius: 50%;
33 box-sizing: border-box;
34 border: 4px solid rgba(255, 239, 210, 0.72);
35 position: relative;
36 }
37
38 .ring::after {
39 content: "";
40 position: absolute;
41 inset: -4px;
42 border-radius: 50%;
43 border: 4px solid transparent;
44 border-bottom-color: #ef1d12;
45 transform: rotate(0deg);
46 animation: spin 1s linear infinite;
47 box-sizing: border-box;
48 }
49
50 @keyframes spin {
51 from { transform: rotate(0deg); }
52 to { transform: rotate(360deg); }
53 }
54</style>
55</head>
56<body>
57 <div class="loader" aria-label="Loading">
58 <div class="ring"></div>
59 </div>
60</body>
61</html>