Relay
React + Tailwind
const T = 2.1;
const css = `
.loader-relay { --ink: light-dark(#373a40, #f1f2f3); --track: light-dark(#dbdde1, #2e3035); position: relative; display: inline-block; font-size: 100px; width: 1.5em; height: 0.06em; border-radius: 0.03em; background: var(--track); overflow: hidden; }
.loader-relay__dash { position: absolute; top: 0; bottom: 0; left: 0; right: 100%; border-radius: inherit; background: var(--ink); animation: ${T}s infinite; }
/* The long dash builds speed and length as it crosses; the short one bursts in fast and coasts out, half a cycle later. */
.loader-relay__dash--long { animation-name: loader-relay-long; animation-timing-function: cubic-bezier(0.55, 0.05, 0.7, 0.55); }
.loader-relay__dash--short { animation-name: loader-relay-short; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); animation-delay: ${(T * 0.44).toFixed(2)}s; }
@keyframes loader-relay-long {
0% { left: -34%; right: 100%; }
56%, 100% { left: 100%; right: -80%; }
}
@keyframes loader-relay-short {
0% { left: -46%; right: 100%; }
54%, 100% { left: 104%; right: -6%; }
}
@media (prefers-reduced-motion: reduce) {
.loader-relay__dash { animation: none; }
.loader-relay__dash--long { left: 0; right: 55%; }
}
`;
export function Preview() {
return (
<>
<style href="kit-loaders-relay" precedence="kit">
{css}
</style>
<div className="loader-relay" role="status" aria-label="Loading">
<span className="loader-relay__dash loader-relay__dash--long" aria-hidden="true" />
<span className="loader-relay__dash loader-relay__dash--short" aria-hidden="true" />
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<div class="loader-relay" role="status" aria-label="Loading">
<span class="loader-relay__dash loader-relay__dash--long" aria-hidden="true"></span>
<span class="loader-relay__dash loader-relay__dash--short" aria-hidden="true"></span>
</div>CSS
.loader-relay { --ink: light-dark(#373a40, #f1f2f3); --track: light-dark(#dbdde1, #2e3035); position: relative; display: inline-block; font-size: 100px; width: 1.5em; height: 0.06em; border-radius: 0.03em; background: var(--track); overflow: hidden; }
.loader-relay__dash { position: absolute; top: 0; bottom: 0; left: 0; right: 100%; border-radius: inherit; background: var(--ink); animation: 2.1s infinite; }
/* The long dash builds speed and length as it crosses; the short one bursts in fast and coasts out, half a cycle later. */
.loader-relay__dash--long { animation-name: loader-relay-long; animation-timing-function: cubic-bezier(0.55, 0.05, 0.7, 0.55); }
.loader-relay__dash--short { animation-name: loader-relay-short; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); animation-delay: 0.92s; }
@keyframes loader-relay-long {
0% { left: -34%; right: 100%; }
56%, 100% { left: 100%; right: -80%; }
}
@keyframes loader-relay-short {
0% { left: -46%; right: 100%; }
54%, 100% { left: 104%; right: -6%; }
}
@media (prefers-reduced-motion: reduce) {
.loader-relay__dash { animation: none; }
.loader-relay__dash--long { left: 0; right: 55%; }
}Goal: Create a "Relay" loader.
Visual behavior: A thin track where a long dash accelerates across and a short one darts after it, taking turns.
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.
- Two dashes run on the same cycle, the short one starting a little under half a cycle later, so one is always arriving as the other leaves.
- The long dash eases in, gaining length and speed as it crosses. The short one bursts in fast and coasts out.
- Made for the top of a page or inside a card, it fills its track at any width.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion a single dash rests across part of the track.
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 "Relay" loader.
Visual behavior: A thin track where a long dash accelerates across and a short one darts after it, taking turns.
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.
- Two dashes run on the same cycle, the short one starting a little under half a cycle later, so one is always arriving as the other leaves.
- The long dash eases in, gaining length and speed as it crosses. The short one bursts in fast and coasts out.
- Made for the top of a page or inside a card, it fills its track at any width.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion a single dash rests across part of the track.
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 thin track where a long dash accelerates across and a short one darts after it, taking turns.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- continuous, loop
- Techniques
- keyframes
- 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 a single dash rests across part of the track.