Quarters
React + Tailwind
import type { CSSProperties } from 'react';
const STEPS = 12; // three pieces, four slots: twelve moves bring every piece home
const STEP = 0.32;
const T = STEPS * STEP;
const MOTION = 0.62;
const pct = (t: number) => `${(t * 100).toFixed(2)}%`;
// Slots go clockwise from the top left. The piece just behind the gap swings
// into it, which leaves the gap where that piece was.
const slotOf = [1, 2, 3];
const angle = slotOf.map((s) => s * 90);
const frames: string[][] = angle.map((a) => [`0% { rotate: ${a}deg; scale: 1; }`]);
for (let k = 0; k < STEPS; k++) {
const gap = [0, 1, 2, 3].find((s) => !slotOf.includes(s))!;
const mover = slotOf.indexOf((gap + 3) % 4);
frames[mover].push(`${pct(k / STEPS)} { rotate: ${angle[mover]}deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }`);
frames[mover].push(`${pct((k + MOTION / 2) / STEPS)} { scale: 1.07; }`);
angle[mover] += 90;
frames[mover].push(`${pct((k + MOTION) / STEPS)} { rotate: ${angle[mover]}deg; scale: 1; }`);
slotOf[mover] = gap;
}
frames.forEach((f, i) => f.push(`100% { rotate: ${angle[i]}deg; scale: 1; }`));
const css = `
.loader-quarters { --ink: light-dark(#373a40, #f1f2f3); position: relative; display: inline-block; font-size: 88px; width: 1em; height: 1em; }
.loader-quarters::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in oklab, var(--ink) 8%, transparent); }
/* Every piece is drawn as the top-left quarter and turned into its slot round the disc's centre. */
.loader-quarters__piece { position: absolute; left: 0; top: 0; width: 0.47em; height: 0.47em; border-top-left-radius: 100%; background: var(--ink); transform-origin: 0.5em 0.5em; rotate: var(--a); animation: ${T.toFixed(2)}s linear infinite; }
${frames.map((f, i) => `.loader-quarters__piece:nth-child(${i + 1}) { animation-name: loader-quarters-piece-${i}; }\n @keyframes loader-quarters-piece-${i} {\n ${f.join('\n ')}\n }`).join('\n ')}
@media (prefers-reduced-motion: reduce) {
.loader-quarters__piece { animation: none !important; }
}
`;
export function Preview() {
return (
<>
<style href="kit-loaders-quarters" precedence="kit">
{css}
</style>
<div className="loader-quarters" role="status" aria-label="Loading">
{[1, 2, 3].map((s) => (
<span key={s} className="loader-quarters__piece" style={{ '--a': `${s * 90}deg` } as CSSProperties} aria-hidden="true" />
))}
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<div class="loader-quarters" role="status" aria-label="Loading">
<span class="loader-quarters__piece" style="--a:90deg" aria-hidden="true"></span>
<span class="loader-quarters__piece" style="--a:180deg" aria-hidden="true"></span>
<span class="loader-quarters__piece" style="--a:270deg" aria-hidden="true"></span>
</div>CSS
.loader-quarters { --ink: light-dark(#373a40, #f1f2f3); position: relative; display: inline-block; font-size: 88px; width: 1em; height: 1em; }
.loader-quarters::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in oklab, var(--ink) 8%, transparent); }
/* Every piece is drawn as the top-left quarter and turned into its slot round the disc's centre. */
.loader-quarters__piece { position: absolute; left: 0; top: 0; width: 0.47em; height: 0.47em; border-top-left-radius: 100%; background: var(--ink); transform-origin: 0.5em 0.5em; rotate: var(--a); animation: 3.84s linear infinite; }
.loader-quarters__piece:nth-child(1) { animation-name: loader-quarters-piece-0; }
@keyframes loader-quarters-piece-0 {
0% { rotate: 90deg; scale: 1; }
16.67% { rotate: 90deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
19.25% { scale: 1.07; }
21.83% { rotate: 180deg; scale: 1; }
41.67% { rotate: 180deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
44.25% { scale: 1.07; }
46.83% { rotate: 270deg; scale: 1; }
66.67% { rotate: 270deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
69.25% { scale: 1.07; }
71.83% { rotate: 360deg; scale: 1; }
91.67% { rotate: 360deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
94.25% { scale: 1.07; }
96.83% { rotate: 450deg; scale: 1; }
100% { rotate: 450deg; scale: 1; }
}
.loader-quarters__piece:nth-child(2) { animation-name: loader-quarters-piece-1; }
@keyframes loader-quarters-piece-1 {
0% { rotate: 180deg; scale: 1; }
8.33% { rotate: 180deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
10.92% { scale: 1.07; }
13.50% { rotate: 270deg; scale: 1; }
33.33% { rotate: 270deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
35.92% { scale: 1.07; }
38.50% { rotate: 360deg; scale: 1; }
58.33% { rotate: 360deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
60.92% { scale: 1.07; }
63.50% { rotate: 450deg; scale: 1; }
83.33% { rotate: 450deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
85.92% { scale: 1.07; }
88.50% { rotate: 540deg; scale: 1; }
100% { rotate: 540deg; scale: 1; }
}
.loader-quarters__piece:nth-child(3) { animation-name: loader-quarters-piece-2; }
@keyframes loader-quarters-piece-2 {
0% { rotate: 270deg; scale: 1; }
0.00% { rotate: 270deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
2.58% { scale: 1.07; }
5.17% { rotate: 360deg; scale: 1; }
25.00% { rotate: 360deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
27.58% { scale: 1.07; }
30.17% { rotate: 450deg; scale: 1; }
50.00% { rotate: 450deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
52.58% { scale: 1.07; }
55.17% { rotate: 540deg; scale: 1; }
75.00% { rotate: 540deg; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1); }
77.58% { scale: 1.07; }
80.17% { rotate: 630deg; scale: 1; }
100% { rotate: 630deg; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
.loader-quarters__piece { animation: none !important; }
}Goal: Create a "Quarters" loader.
Visual behavior: A disc with one quarter missing: the pieces swing round into the gap one at a time, so the gap walks the other way.
Technique:
- Pure CSS: every motion is a keyframe animation, so the plain HTML version needs no script.
- Everything is sized in em from one font-size on the root, so changing that one value scales the whole loader.
- Every piece is the top left quarter (a square with one corner rounded to 100%) turned into its slot about the disc centre.
- The piece just behind the gap swings into it, which leaves the gap where that piece was. Twelve moves bring every piece home, so the loop closes.
- A moving piece lifts outward a little mid-swing and settles as it lands. A faint disc behind marks the gap.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the disc rests with its gap at the top left.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Quarters" loader.
Visual behavior: A disc with one quarter missing: the pieces swing round into the gap one at a time, so the gap walks the other way.
Technique:
- Pure CSS: every motion is a keyframe animation, so the plain HTML version needs no script.
- Everything is sized in em from one font-size on the root, so changing that one value scales the whole loader.
- Every piece is the top left quarter (a square with one corner rounded to 100%) turned into its slot about the disc centre.
- The piece just behind the gap swings into it, which leaves the gap where that piece was. Twelve moves bring every piece home, so the loop closes.
- A moving piece lifts outward a little mid-swing and settles as it lands. A faint disc behind marks the gap.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the disc rests with its gap at the top left.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
A disc with one quarter missing: the pieces swing round into the gap one at a time, so the gap walks the other way.
- Dependencies
- None
- Difficulty
- Intermediate
- Triggers
- continuous, loop
- Techniques
- keyframes, border radius, transform only
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the disc rests with its gap at the top left.