model output
Gemini 3 Flash Preview

Simple loading indicators
A 0.95T 0.33
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>Circle Fill Animation</title>
7  <style>
8    /* Reset and page layout */
9    body {
10      margin: 0;
11      padding: 0;
12      background-color: #ffffff;
13      display: flex;
14      justify-content: flex-start;
15      align-items: flex-start;
16      height: 100vh;
17      overflow: hidden;
18    }
19
20    /* Circle Container */
21    .circle-loader {
22      width: 48px;
23      height: 48px;
24      background-color: #cccccc; /* The gray background seen in the video */
25      border-radius: 50%;
26      position: relative;
27      margin: 20px; /* Positioned in the top-left as per video */
28      overflow: hidden; /* Clips the teal square into a circle */
29    }
30
31    /* The Teal Fill Element */
32    .fill {
33      position: absolute;
34      top: 0;
35      left: 0;
36      width: 100%;
37      height: 100%;
38      background-color: #1b8a7c; /* Precisely matching the teal hex code */
39      
40      /* 
41         Animation Logic:
42         Total duration: 3s
43         0.0s to 1.5s: Fill phase (Teal slides from -100% to 0%)
44         1.5s to 3.0s: Exit phase (Teal slides from 0% to 100%, revealing gray from top)
45         -0.5s delay: Shifts the animation so t=0 matches the sliver state in the first frame
46      */
47      transform: translateY(-100%);
48      animation: slide-fill 3s infinite;
49      animation-delay: -0.5s;
50    }
51
52    @keyframes slide-fill {
53      /* Phase 1: Sliding in from the top to fully cover the circle */
54      0% {
55        transform: translateY(-100%);
56        animation-timing-function: ease-in-out;
57      }
58      50% {
59        transform: translateY(0%);
60        animation-timing-function: ease-in-out;
61      }
62      /* Phase 2: Sliding out through the bottom, revealing gray from top down */
63      100% {
64        transform: translateY(100%);
65      }
66    }
67  </style>
68</head>
69<body>
70
71  <!-- The loader structure -->
72  <div class="circle-loader">
73    <div class="fill"></div>
74  </div>
75
76</body>
77</html>