Asterisk
React + Tailwind
import type { CSSProperties } from 'react';
const T = 1.8;
const css = `
.loader-asterisk { --ink: light-dark(#373a40, #f1f2f3); display: inline-grid; place-items: center; font-size: 88px; width: 1em; height: 1em; }
/* All three start as one line. They fan out to their own angle, then keep turning
the same way until they meet again half a turn on, which looks like the start. */
.loader-asterisk__bar { grid-area: 1 / 1; width: 0.86em; height: 0.1em; border-radius: 0.05em; background: var(--ink); animation: loader-asterisk-fan ${T}s infinite; }
@keyframes loader-asterisk-fan {
0% { rotate: 0deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
42%, 56% { rotate: var(--a); scale: 0.88 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
100% { rotate: 180deg; scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) {
.loader-asterisk__bar { animation: none; rotate: var(--a); scale: 0.88 1; }
}
`;
export function Preview() {
return (
<>
<style href="kit-loaders-asterisk" precedence="kit">
{css}
</style>
<div className="loader-asterisk" role="status" aria-label="Loading">
{[0, 60, 120].map((a) => (
<span key={a} className="loader-asterisk__bar" style={{ '--a': `${a}deg` } as CSSProperties} aria-hidden="true" />
))}
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<div class="loader-asterisk" role="status" aria-label="Loading">
<span class="loader-asterisk__bar" style="--a:0deg" aria-hidden="true"></span>
<span class="loader-asterisk__bar" style="--a:60deg" aria-hidden="true"></span>
<span class="loader-asterisk__bar" style="--a:120deg" aria-hidden="true"></span>
</div>CSS
.loader-asterisk { --ink: light-dark(#373a40, #f1f2f3); display: inline-grid; place-items: center; font-size: 88px; width: 1em; height: 1em; }
/* All three start as one line. They fan out to their own angle, then keep turning
the same way until they meet again half a turn on, which looks like the start. */
.loader-asterisk__bar { grid-area: 1 / 1; width: 0.86em; height: 0.1em; border-radius: 0.05em; background: var(--ink); animation: loader-asterisk-fan 1.8s infinite; }
@keyframes loader-asterisk-fan {
0% { rotate: 0deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
42%, 56% { rotate: var(--a); scale: 0.88 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
100% { rotate: 180deg; scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) {
.loader-asterisk__bar { animation: none; rotate: var(--a); scale: 0.88 1; }
}Goal: Create a "Asterisk" loader.
Visual behavior: Three bars lying as one line fan out into a six-point star, then fold shut again as they keep turning.
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.
- All three bars share one keyframe. Each fans out to its own angle from a --a variable, then keeps turning the same way until they meet half a turn on, which looks just like the start.
- The bars shorten slightly while the star is open, so it reads as a shape opening rather than lines crossing.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the bars rest open as a star.
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 "Asterisk" loader.
Visual behavior: Three bars lying as one line fan out into a six-point star, then fold shut again as they keep turning.
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.
- All three bars share one keyframe. Each fans out to its own angle from a --a variable, then keeps turning the same way until they meet half a turn on, which looks just like the start.
- The bars shorten slightly while the star is open, so it reads as a shape opening rather than lines crossing.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the bars rest open as a star.
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
Three bars lying as one line fan out into a six-point star, then fold shut again as they keep turning.
- Dependencies
- None
- Difficulty
- Beginner
- Triggers
- continuous, loop, morph
- Techniques
- keyframes, css variables, 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 bars rest open as a star.