Claude Sonnet 4.6

Tiny Single Element Loading Animations
A 0.79T 0.15
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>Location Pin Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: white;
16    width: 100vw;
17    height: 100vh;
18    overflow: hidden;
19  }
20
21  .pin-container {
22    position: absolute;
23    top: 28px;
24    left: 40px;
25    display: flex;
26    flex-direction: column;
27    align-items: center;
28    animation: pinBounce 2s ease-in-out infinite;
29  }
30
31  .pin-head {
32    width: 22px;
33    height: 22px;
34    border: 2.5px solid #c8c8c8;
35    border-radius: 50%;
36    position: relative;
37    background: transparent;
38  }
39
40  .pin-tail {
41    width: 2px;
42    height: 8px;
43    background: #c8c8c8;
44    margin-top: -1px;
45  }
46
47  .pin-base {
48    width: 18px;
49    height: 5px;
50    background: #c8c8c8;
51    border-radius: 50%;
52    margin-top: 1px;
53  }
54
55  @keyframes pinBounce {
56    0%, 100% {
57      transform: translateY(0);
58    }
59    50% {
60      transform: translateY(-4px);
61    }
62  }
63</style>
64</head>
65<body>
66  <div class="pin-container">
67    <div class="pin-head"></div>
68    <div class="pin-tail"></div>
69    <div class="pin-base"></div>
70  </div>
71</body>
72</html>