model output
GPT-5.4

Animated Concepts #3
A 0.88T 0.20
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>Diagonal Dot Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --dot:#ff7f79;
11    --size:16px;
12    --gap:14px;
13    --duration:1.2s;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  body{
25    display:grid;
26    place-items:center;
27  }
28
29  .loader{
30    position:relative;
31    width:calc(var(--size) + 3 * var(--gap));
32    height:calc(var(--size) + 3 * var(--gap));
33    animation:flip var(--duration) ease-in-out infinite;
34    transform-origin:center;
35  }
36
37  .dot{
38    position:absolute;
39    width:var(--size);
40    height:var(--size);
41    border-radius:3px;
42    background:var(--dot);
43    box-shadow:0 0 0 0.5px rgba(255,255,255,.06) inset;
44  }
45
46  .dot:nth-child(1){ left:0;               top:calc(3 * var(--gap)); }
47  .dot:nth-child(2){ left:var(--gap);      top:calc(2 * var(--gap)); }
48  .dot:nth-child(3){ left:calc(2 * var(--gap)); top:var(--gap); }
49  .dot:nth-child(4){ left:calc(3 * var(--gap)); top:0; }
50
51  @keyframes flip{
52    0%, 22%{
53      transform:rotate(0deg);
54    }
55    28%, 72%{
56      transform:rotate(90deg);
57    }
58    78%, 100%{
59      transform:rotate(180deg);
60    }
61  }
62</style>
63</head>
64<body>
65  <div class="loader" aria-label="loading">
66    <div class="dot"></div>
67    <div class="dot"></div>
68    <div class="dot"></div>
69    <div class="dot"></div>
70  </div>
71</body>
72</html>