model output
GPT-5.4

Animated Concepts #3
A 0.76T 0.28
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 Slash Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --accent:#ff7f73;
11    --size:76px;
12    --slash-w:6px;
13    --slash-h:42px;
14    --gap:10px;
15    --cycle:1.8s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  body{
27    display:grid;
28    place-items:center;
29  }
30
31  .loader{
32    position:relative;
33    width:var(--size);
34    height:var(--size);
35  }
36
37  /* final circular mark */
38  .disc{
39    position:absolute;
40    inset:0;
41    border-radius:50%;
42    background:var(--accent);
43    opacity:0;
44    transform:scale(.72);
45    animation:discPulse var(--cycle) linear infinite;
46  }
47
48  /* cut the diagonal dark band through the circle */
49  .disc::before{
50    content:"";
51    position:absolute;
52    left:50%;
53    top:50%;
54    width:18px;
55    height:110px;
56    background:var(--bg);
57    transform:translate(-50%,-50%) rotate(-45deg);
58    border-radius:2px;
59  }
60
61  /* the thin pink slash that rotates through the cycle */
62  .slash{
63    position:absolute;
64    left:50%;
65    top:50%;
66    width:var(--slash-w);
67    height:var(--slash-h);
68    margin-left:calc(var(--slash-w) / -2);
69    margin-top:calc(var(--slash-h) / -2);
70    background:linear-gradient(180deg,#ff9a90 0%, var(--accent) 100%);
71    border-radius:999px;
72    box-shadow:0 0 0.5px rgba(255,127,115,.8);
73    transform-origin:50% 50%;
74    animation:slashSpin var(--cycle) linear infinite;
75    z-index:2;
76  }
77
78  /* second slash only visible during the full logo moment */
79  .slash.echo{
80    opacity:0;
81    animation:echoReveal var(--cycle) linear infinite;
82  }
83
84  @keyframes slashSpin{
85    /* visible as a single rotating slash most of the time */
86    0%   { transform:translate(0,0) rotate(-45deg) scaleY(1); opacity:1; }
87    18%  { transform:translate(0,0) rotate(22deg)  scaleY(1); opacity:1; }
88    36%  { transform:translate(0,0) rotate(45deg)  scaleY(1); opacity:1; }
89    54%  { transform:translate(0,0) rotate(68deg)  scaleY(1); opacity:1; }
90    72%  { transform:translate(0,0) rotate(112deg) scaleY(1); opacity:1; }
91    82%  { transform:translate(0,0) rotate(132deg) scaleY(1); opacity:1; }
92    88%  { transform:translate(0,0) rotate(135deg) scaleY(1); opacity:1; }
93    100% { transform:translate(0,0) rotate(315deg) scaleY(1); opacity:1; }
94  }
95
96  @keyframes discPulse{
97    /* brief reveal of the full circular logo */
98    0%,8%   { opacity:1; transform:scale(1); }
99    14%,86% { opacity:0; transform:scale(.72); }
100    92%,100%{ opacity:1; transform:scale(1); }
101  }
102
103  @keyframes echoReveal{
104    /* second parallel slash appears only when the disc is visible */
105    0%,8%{
106      opacity:1;
107      transform:translate(10px,-6px) rotate(-45deg);
108    }
109    9%,91%{
110      opacity:0;
111      transform:translate(10px,-6px) rotate(-45deg);
112    }
113    92%,100%{
114      opacity:1;
115      transform:translate(10px,-6px) rotate(-45deg);
116    }
117  }
118
119  /* keep proportions similar on smaller screens */
120  @media (max-width: 600px){
121    :root{
122      --size:64px;
123      --slash-h:36px;
124    }
125  }
126</style>
127</head>
128<body>
129  <div class="loader" aria-label="loading animation">
130    <div class="disc"></div>
131    <div class="slash"></div>
132    <div class="slash echo"></div>
133  </div>
134</body>
135</html>