model output
Claude Sonnet 4.6

CSS Spinners
A 0.90T 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>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: 100%;
17    height: 100vh;
18  }
19
20  .green-bar {
21    width: 100%;
22    height: 245px;
23    background-color: #4caf50;
24    position: relative;
25    display: flex;
26    align-items: center;
27    justify-content: center;
28  }
29
30  .circle {
31    width: 22px;
32    height: 22px;
33    border: 2px solid #2d7a2d;
34    border-radius: 50%;
35    background: transparent;
36    animation: pulse 1.5s ease-in-out infinite;
37  }
38
39  @keyframes pulse {
40    0% {
41      transform: scale(0);
42      opacity: 0;
43    }
44    30% {
45      transform: scale(1);
46      opacity: 1;
47    }
48    70% {
49      transform: scale(1);
50      opacity: 1;
51    }
52    100% {
53      transform: scale(0);
54      opacity: 0;
55    }
56  }
57</style>
58</head>
59<body>
60  <div class="green-bar">
61    <div class="circle"></div>
62  </div>
63</body>
64</html>