Claude Sonnet 4.6

Tiny Single Element Loading Animations
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>Icon Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: white;
12    width: 100vw;
13    height: 100vh;
14  }
15
16  .icon-container {
17    position: absolute;
18    top: 40px;
19    left: 40px;
20    width: 24px;
21    height: 24px;
22  }
23
24  svg {
25    width: 24px;
26    height: 24px;
27  }
28
29  .circle {
30    fill: none;
31    stroke: #c0c0c0;
32    stroke-width: 1.5;
33  }
34
35  .inner-lines {
36    fill: none;
37    stroke: #c0c0c0;
38    stroke-width: 1.5;
39    stroke-linecap: round;
40    transform-origin: 12px 12px;
41    animation: rotateLines 2s linear infinite;
42  }
43
44  @keyframes rotateLines {
45    0% { transform: rotate(0deg); }
46    100% { transform: rotate(360deg); }
47  }
48
49  /* Toggle between plus and X */
50  .plus-group {
51    animation: togglePlus 2s ease-in-out infinite;
52  }
53
54  .x-group {
55    animation: toggleX 2s ease-in-out infinite;
56  }
57
58  @keyframes togglePlus {
59    0%, 49% { opacity: 1; }
60    50%, 100% { opacity: 0; }
61  }
62
63  @keyframes toggleX {
64    0%, 49% { opacity: 0; }
65    50%, 100% { opacity: 1; }
66  }
67</style>
68</head>
69<body>
70
71<div class="icon-container">
72  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
73    <!-- Circle -->
74    <circle class="circle" cx="12" cy="12" r="10"/>
75    
76    <!-- Plus sign (shown first half) -->
77    <g class="plus-group">
78      <line x1="12" y1="7" x2="12" y2="17" stroke="#c0c0c0" stroke-width="1.5" stroke-linecap="round"/>
79      <line x1="7" y1="12" x2="17" y2="12" stroke="#c0c0c0" stroke-width="1.5" stroke-linecap="round"/>
80    </g>
81    
82    <!-- X sign (shown second half, rotating) -->
83    <g class="x-group">
84      <g class="inner-lines">
85        <line x1="8" y1="8" x2="16" y2="16" stroke="#c0c0c0" stroke-width="1.5" stroke-linecap="round"/>
86        <line x1="16" y1="8" x2="8" y2="16" stroke="#c0c0c0" stroke-width="1.5" stroke-linecap="round"/>
87      </g>
88    </g>
89  </svg>
90</div>
91
92</body>
93</html>