Chase
React + Tailwind
import type { CSSProperties } from 'react';
const T = 1.6;
const DOTS = 6;
const css = `
.loader-chase { --ink: light-dark(#373a40, #f1f2f3); position: relative; display: inline-block; font-size: 96px; width: 1em; height: 1em; }
/* One lap each, easing in and out over the top. Each dot starts a moment after the one ahead,
so they bunch where the lap is slow and string out where it is fast. */
.loader-chase__dot { position: absolute; inset: 0; animation: loader-chase-lap ${T}s cubic-bezier(0.62, 0.04, 0.38, 0.96) infinite; animation-delay: var(--d); }
.loader-chase__dot::before { content: ''; position: absolute; left: 50%; top: 0.06em; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); border-radius: 50%; background: var(--ink); opacity: var(--o); }
@keyframes loader-chase-lap { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.loader-chase__dot { animation: none; transform: rotate(calc(var(--i) * -20deg)); }
}
`;
export function Preview() {
return (
<>
<style href="kit-loaders-chase" precedence="kit">
{css}
</style>
<div className="loader-chase" role="status" aria-label="Loading">
{Array.from({ length: DOTS }, (_, i) => (
<span
key={i}
className="loader-chase__dot"
style={{ '--d': `${(i * 0.075).toFixed(3)}s`, '--s': `${(0.14 - i * 0.01).toFixed(3)}em`, '--o': (1 - i * 0.13).toFixed(2), '--i': i } as CSSProperties}
aria-hidden="true"
/>
))}
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<div class="loader-chase" role="status" aria-label="Loading">
<span class="loader-chase__dot" style="--d:0.000s;--s:0.140em;--o:1.00;--i:0" aria-hidden="true"></span>
<span class="loader-chase__dot" style="--d:0.075s;--s:0.130em;--o:0.87;--i:1" aria-hidden="true"></span>
<span class="loader-chase__dot" style="--d:0.150s;--s:0.120em;--o:0.74;--i:2" aria-hidden="true"></span>
<span class="loader-chase__dot" style="--d:0.225s;--s:0.110em;--o:0.61;--i:3" aria-hidden="true"></span>
<span class="loader-chase__dot" style="--d:0.300s;--s:0.100em;--o:0.48;--i:4" aria-hidden="true"></span>
<span class="loader-chase__dot" style="--d:0.375s;--s:0.090em;--o:0.35;--i:5" aria-hidden="true"></span>
</div>CSS
.loader-chase { --ink: light-dark(#373a40, #f1f2f3); position: relative; display: inline-block; font-size: 96px; width: 1em; height: 1em; }
/* One lap each, easing in and out over the top. Each dot starts a moment after the one ahead,
so they bunch where the lap is slow and string out where it is fast. */
.loader-chase__dot { position: absolute; inset: 0; animation: loader-chase-lap 1.6s cubic-bezier(0.62, 0.04, 0.38, 0.96) infinite; animation-delay: var(--d); }
.loader-chase__dot::before { content: ''; position: absolute; left: 50%; top: 0.06em; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); border-radius: 50%; background: var(--ink); opacity: var(--o); }
@keyframes loader-chase-lap { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.loader-chase__dot { animation: none; transform: rotate(calc(var(--i) * -20deg)); }
}Goal: Create a "Chase" loader.
Visual behavior: Six dots run round a circle, bunching up as they slow over the top and spreading out as they race round the bottom.
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 dot runs the same lap with a strong ease in and out over the top. Each starts a moment after the one ahead, so they bunch where the lap is slow and string out where it is fast.
- The lead dot is the largest and brightest and the rest step down, so the group reads as one comet.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the dots rest in a short trailing arc.
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 "Chase" loader.
Visual behavior: Six dots run round a circle, bunching up as they slow over the top and spreading out as they race round the bottom.
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 dot runs the same lap with a strong ease in and out over the top. Each starts a moment after the one ahead, so they bunch where the lap is slow and string out where it is fast.
- The lead dot is the largest and brightest and the rest step down, so the group reads as one comet.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the dots rest in a short trailing arc.
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
Six dots run round a circle, bunching up as they slow over the top and spreading out as they race round the bottom.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- continuous, loop, delay stagger
- Techniques
- keyframes, transition delay stagger, 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 dots rest in a short trailing arc.