GPT-5.4

Tiny Single Element Loading Animations

A 0.87T 0.34

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>Minimal Corner Spinner</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #fff;
13    overflow: hidden;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #fff;
21  }
22
23  /* Small loading arc in the top-left corner */
24  .spinner {
25    position: absolute;
26    top: 14px;
27    left: 14px;
28    width: 28px;
29    height: 28px;
30    border-radius: 50%;
31    box-sizing: border-box;
32    border: 2px solid #ececec;
33    border-top-color: #2f2f2f;
34    border-right-color: #2f2f2f;
35    animation: spin 0.9s linear infinite;
36    transform-origin: 50% 50%;
37  }
38
39  @keyframes spin {
40    from { transform: rotate(0deg); }
41    to   { transform: rotate(360deg); }
42  }
43</style>
44</head>
45<body>
46  <div class="stage">
47    <div class="spinner"></div>
48  </div>
49</body>
50</html>