Claude Sonnet 4.6

Tiny Single Element Loading Animations

A 0.94T 0.26

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>Loading Spinner</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: #ffffff;
16    width: 100vw;
17    height: 100vh;
18  }
19
20  .spinner {
21    position: absolute;
22    top: 40px;
23    left: 40px;
24    width: 20px;
25    height: 20px;
26  }
27
28  .spinner svg {
29    width: 20px;
30    height: 20px;
31    animation: rotate 1s linear infinite;
32  }
33
34  @keyframes rotate {
35    from {
36      transform: rotate(0deg);
37    }
38    to {
39      transform: rotate(360deg);
40    }
41  }
42
43  .spinner circle {
44    fill: none;
45    stroke: #c8c8c8;
46    stroke-width: 1.5;
47    stroke-linecap: round;
48    stroke-dasharray: 50;
49    stroke-dashoffset: 10;
50  }
51</style>
52</head>
53<body>
54  <div class="spinner">
55    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
56      <circle cx="10" cy="10" r="8"/>
57    </svg>
58  </div>
59</body>
60</html>