model output
Gemini 3 Flash Preview

flat loading animate
A 0.80T 0.27
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 Segment Animation</title>
7    <style>
8        :root {
9            --color-orange: #ffb366;
10            --color-teal: #00a693;
11            --color-blue: #2c3e50;
12            --color-red: #ff5e5e;
13            --duration: 4s;
14            --easing: ease-in-out;
15        }
16
17        body {
18            margin: 0;
19            padding: 0;
20            display: flex;
21            justify-content: center;
22            align-items: center;
23            height: 100vh;
24            background-color: #ffffff;
25        }
26
27        .container {
28            position: relative;
29            width: 100px;
30            height: 100px;
31        }
32
33        .quadrant {
34            position: absolute;
35            width: 51%; /* Small overlap to prevent sub-pixel gaps */
36            height: 51%;
37            transition: background-color 0.4s, opacity 0.4s;
38        }
39
40        /* Positions and Border Radii for circle segments */
41        .tl {
42            top: 0;
43            left: 0;
44            border-top-left-radius: 100%;
45            animation: anim-tl var(--duration) var(--easing) infinite;
46        }
47
48        .tr {
49            top: 0;
50            right: 0;
51            border-top-right-radius: 100%;
52            animation: anim-tr var(--duration) var(--easing) infinite;
53        }
54
55        .bl {
56            bottom: 0;
57            left: 0;
58            border-bottom-left-radius: 100%;
59            animation: anim-bl var(--duration) var(--easing) infinite;
60        }
61
62        .br {
63            bottom: 0;
64            right: 0;
65            border-bottom-right-radius: 100%;
66            animation: anim-br var(--duration) var(--easing) infinite;
67        }
68
69        /* Top Left Quadrant Keyframes */
70        @keyframes anim-tl {
71            0%, 10%    { background-color: var(--color-orange); opacity: 1; }
72            12.5%, 25% { background-color: var(--color-teal); opacity: 1; }
73            30%, 80%   { opacity: 0; }
74            87.5%, 100% { background-color: var(--color-orange); opacity: 1; }
75        }
76
77        /* Top Right Quadrant Keyframes */
78        @keyframes anim-tr {
79            0%, 10%    { background-color: var(--color-orange); opacity: 1; }
80            12.5%, 80% { opacity: 0; }
81            87.5%, 100% { background-color: var(--color-orange); opacity: 1; }
82        }
83
84        /* Bottom Left Quadrant Keyframes */
85        @keyframes anim-bl {
86            0%, 10%    { background-color: var(--color-orange); opacity: 1; }
87            12.5%, 25% { background-color: var(--color-teal); opacity: 1; }
88            37.5%, 50% { background-color: var(--color-blue); opacity: 1; }
89            62.5%      { background-color: var(--color-red); opacity: 1; }
90            75%        { background-color: var(--color-orange); opacity: 1; }
91            87.5%, 100% { background-color: var(--color-orange); opacity: 1; }
92        }
93
94        /* Bottom Right Quadrant Keyframes */
95        @keyframes anim-br {
96            0%, 10%    { background-color: var(--color-orange); opacity: 1; }
97            12.5%, 45% { opacity: 0; }
98            50%, 75%   { background-color: var(--color-red); opacity: 1; }
99            87.5%, 100% { background-color: var(--color-orange); opacity: 1; }
100        }
101
102    </style>
103</head>
104<body>
105
106    <div class="container">
107        <div class="quadrant tl"></div>
108        <div class="quadrant tr"></div>
109        <div class="quadrant bl"></div>
110        <div class="quadrant br"></div>
111    </div>
112
113</body>
114</html>