model output
Claude Sonnet 4.6

Wavy Loading Animations
A 0.69T 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>Ripple Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #ebebeb;
16    width: 100vw;
17    height: 100vh;
18    overflow: hidden;
19    display: flex;
20    align-items: center;
21    justify-content: center;
22  }
23
24  .container {
25    position: absolute;
26    top: 108px;
27    left: 50%;
28    transform: translateX(-50%);
29    width: 0;
30    height: 0;
31  }
32
33  .ring {
34    position: absolute;
35    border-radius: 50%;
36    border: 1px solid #c0c0c0;
37    transform: translate(-50%, -50%);
38    animation: ripple 2s ease-in-out infinite;
39  }
40
41  @keyframes ripple {
42    0% {
43      width: 4px;
44      height: 4px;
45      opacity: 1;
46    }
47    50% {
48      width: 80px;
49      height: 80px;
50      opacity: 0.6;
51    }
52    100% {
53      width: 4px;
54      height: 4px;
55      opacity: 1;
56    }
57  }
58
59  .ring:nth-child(1) { animation-delay: 0s; }
60  .ring:nth-child(2) { animation-delay: -0.2s; }
61  .ring:nth-child(3) { animation-delay: -0.4s; }
62  .ring:nth-child(4) { animation-delay: -0.6s; }
63  .ring:nth-child(5) { animation-delay: -0.8s; }
64  .ring:nth-child(6) { animation-delay: -1.0s; }
65  .ring:nth-child(7) { animation-delay: -1.2s; }
66  .ring:nth-child(8) { animation-delay: -1.4s; }
67  .ring:nth-child(9) { animation-delay: -1.6s; }
68  .ring:nth-child(10) { animation-delay: -1.8s; }
69</style>
70</head>
71<body>
72<div class="container">
73  <div class="ring"></div>
74  <div class="ring"></div>
75  <div class="ring"></div>
76  <div class="ring"></div>
77  <div class="ring"></div>
78  <div class="ring"></div>
79  <div class="ring"></div>
80  <div class="ring"></div>
81  <div class="ring"></div>
82  <div class="ring"></div>
83</div>
84</body>
85</html>