Claude Sonnet 4.6

Tiny Single Element Loading Animations
A 0.85T 0.25
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>Search 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  .search-icon {
17    position: absolute;
18    top: 28px;
19    left: 28px;
20    width: 20px;
21    height: 20px;
22  }
23
24  .search-icon svg {
25    width: 100%;
26    height: 100%;
27    overflow: visible;
28  }
29
30  /* The circle stays fixed */
31  .circle {
32    fill: none;
33    stroke: #c0c0c0;
34    stroke-width: 1.2;
35  }
36
37  /* The handle rotates around the circle */
38  .handle {
39    stroke: #c0c0c0;
40    stroke-width: 1.2;
41    stroke-linecap: round;
42    transform-origin: 10px 10px;
43    animation: rotateHandle 1.5s linear infinite;
44  }
45
46  /* The inner tick (minute hand) also rotates */
47  .tick {
48    stroke: #c0c0c0;
49    stroke-width: 1.2;
50    stroke-linecap: round;
51    transform-origin: 10px 10px;
52    animation: rotateTick 1.5s linear infinite;
53  }
54
55  @keyframes rotateHandle {
56    from { transform: rotate(0deg); }
57    to   { transform: rotate(360deg); }
58  }
59
60  @keyframes rotateTick {
61    from { transform: rotate(0deg); }
62    to   { transform: rotate(360deg); }
63  }
64</style>
65</head>
66<body>
67
68<div class="search-icon">
69  <svg viewBox="0 0 20 24" xmlns="http://www.w3.org/2000/svg">
70    <!-- Circle (lens of magnifying glass) -->
71    <circle class="circle" cx="10" cy="10" r="8"/>
72    
73    <!-- Inner tick / minute hand -->
74    <line class="tick" x1="10" y1="10" x2="10" y2="4"/>
75    
76    <!-- Handle of magnifying glass, rotates -->
77    <line class="handle" x1="16" y1="16" x2="20" y2="20"/>
78  </svg>
79</div>
80
81</body>
82</html>