model output
Gemini 3 Flash Preview

Simple loading indicators
A 0.83T 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>Circular Progress Loader</title>
7  <style>
8    /* 
9      Animation Analysis:
10      - Total Cycle Duration: 3.0 seconds
11      - Fill Phase (Teal grows): 0s to 1s (0% to 33.3% of cycle)
12      - Clear Phase (Gray grows over Teal): 1s to 2.5s (33.3% to 83.3% of cycle)
13      - Pause Phase (Full Gray): 2.5s to 3s (83.3% to 100% of cycle)
14      - Colors: Teal (#16917c), Light Gray (#d3d3d3)
15      - Motion: Linear clockwise fill starting from 12 o'clock
16    */
17
18    :root {
19      --teal: #16917c;
20      --gray: #d3d3d3;
21      --bg: #ffffff;
22    }
23
24    body {
25      margin: 0;
26      padding: 20px;
27      background-color: var(--bg);
28      display: flex;
29      justify-content: flex-start;
30      align-items: flex-start;
31    }
32
33    /* 
34      Using @property to allow smooth interpolation of percentage values 
35      within a conic-gradient. This provides the most precise recreation 
36      of the solid-fill "wipe" effect seen in the video.
37    */
38    @property --p-fill {
39      syntax: '<percentage>';
40      inherits: false;
41      initial-value: 0%;
42    }
43
44    @property --p-clear {
45      syntax: '<percentage>';
46      inherits: false;
47      initial-value: 0%;
48    }
49
50    .loader {
51      width: 48px;
52      height: 48px;
53      border-radius: 50%;
54      /* 
55        The gradient logic:
56        1. From 0 to --p-clear: Gray (the clearing part)
57        2. From --p-clear to --p-fill: Teal (the active progress part)
58        3. From --p-fill to 100%: Gray (the upcoming part)
59      */
60      background: conic-gradient(
61        var(--gray) 0%,
62        var(--gray) var(--p-clear),
63        var(--teal) var(--p-clear),
64        var(--teal) var(--p-fill),
65        var(--gray) var(--p-fill),
66        var(--gray) 100%
67      );
68      animation: progress-cycle 3s linear infinite;
69      box-shadow: 0 0 1px rgba(0,0,0,0.05); /* Slight anti-aliasing help */
70    }
71
72    @keyframes progress-cycle {
73      /* Start: Circle is gray */
74      0% {
75        --p-fill: 0%;
76        --p-clear: 0%;
77      }
78      /* 1.0s: Circle becomes fully Teal (1s / 3s = 33.33%) */
79      33.33% {
80        --p-fill: 100%;
81        --p-clear: 0%;
82      }
83      /* 2.5s: Gray finishes clearing the Teal (2.5s / 3s = 83.33%) */
84      83.33% {
85        --p-fill: 100%;
86        --p-clear: 100%;
87      }
88      /* 2.5s - 3.0s: Pause in fully Gray state before next loop */
89      100% {
90        --p-fill: 100%;
91        --p-clear: 100%;
92      }
93    }
94
95    /* Fallback for browsers that do not support @property (like Firefox) */
96    @supports not (background: paint(property)) {
97      .loader {
98        /* Simplistic fallback if variables can't be animated directly */
99        background-color: var(--gray);
100        position: relative;
101        overflow: hidden;
102      }
103      .loader::after {
104        content: "Please view in a Chromium or Safari-based browser for full animation accuracy.";
105        position: absolute;
106        width: 200px;
107        font-size: 10px;
108        bottom: -30px;
109        color: #888;
110      }
111    }
112  </style>
113</head>
114<body>
115
116  <div class="loader"></div>
117
118</body>
119</html>