Carousel

No dependencies

React + Tailwind

HTML + CSS + JS

React + Tailwind

import type { CSSProperties } from 'react';

const T = 2.6;
const DOTS = 8;
const DOT = 0.12; // em
const RX = 0.5; // ring radius across, em
const RY = 0.23; // and its height once tipped toward you
const CX = 0.6;
const CY = 0.32;
const pct = (t: number) => `${(t * 100).toFixed(2)}%`;

// One lap round the tipped ring, sampled. Depth comes from where the dot is on
// the ring: nearest at the bottom, so it is biggest, brightest and on top there.
const N = 36;
const at = (u: number) => {
  const a = u * 2 * Math.PI;
  const near = (Math.cos(a) + 1) / 2;
  const x = CX + RX * Math.sin(a) - DOT / 2;
  const y = CY + RY * Math.cos(a) - DOT / 2;
  return `transform: translate(${x.toFixed(4)}em, ${y.toFixed(4)}em) scale(${(0.5 + 0.65 * near).toFixed(3)}); opacity: ${(0.3 + 0.7 * near).toFixed(2)}; z-index: ${Math.round(near * 10)};`;
};
const frames = Array.from({ length: N + 1 }, (_, i) => `${pct(i / N)} { ${at(i / N)} }`).join('\n    ');
const still = Array.from({ length: DOTS }, (_, i) => `.loader-carousel__dot:nth-child(${i + 1}) { ${at(i / DOTS)} }`).join('\n    ');

const css = `
  .loader-carousel { --ink: light-dark(#373a40, #f1f2f3); position: relative; display: inline-block; font-size: 110px; width: ${2 * CX}em; height: ${2 * CY}em; }
  .loader-carousel__dot { position: absolute; left: 0; top: 0; width: ${DOT}em; height: ${DOT}em; border-radius: 50%; background: var(--ink); animation: loader-carousel-lap ${T}s linear infinite; animation-delay: var(--d); }
  @keyframes loader-carousel-lap {
    ${frames}
  }
  @media (prefers-reduced-motion: reduce) {
    .loader-carousel__dot { animation: none; }
    ${still}
  }
`;

export function Preview() {
  return (
    <>
      <style href="kit-loaders-carousel" precedence="kit">
        {css}
      </style>
      <div className="loader-carousel" role="status" aria-label="Loading">
        {Array.from({ length: DOTS }, (_, i) => (
          <span key={i} className="loader-carousel__dot" style={{ '--d': `${(-(i * T) / DOTS).toFixed(3)}s` } as CSSProperties} aria-hidden="true" />
        ))}
      </div>
    </>
  );
}

Markup where the component goes, CSS in your stylesheet. No JavaScript.

HTML

<div class="loader-carousel" role="status" aria-label="Loading">
  <span class="loader-carousel__dot" style="--d:0.000s" aria-hidden="true"></span>
  <span class="loader-carousel__dot" style="--d:-0.325s" aria-hidden="true"></span>
  <span class="loader-carousel__dot" style="--d:-0.650s" aria-hidden="true"></span>
  <span class="loader-carousel__dot" style="--d:-0.975s" aria-hidden="true"></span>
  <span class="loader-carousel__dot" style="--d:-1.300s" aria-hidden="true"></span>
  <span class="loader-carousel__dot" style="--d:-1.625s" aria-hidden="true"></span>
  <span class="loader-carousel__dot" style="--d:-1.950s" aria-hidden="true"></span>
  <span class="loader-carousel__dot" style="--d:-2.275s" aria-hidden="true"></span>
</div>

CSS

.loader-carousel { --ink: light-dark(#373a40, #f1f2f3); position: relative; display: inline-block; font-size: 110px; width: 1.2em; height: 0.64em; }
.loader-carousel__dot { position: absolute; left: 0; top: 0; width: 0.12em; height: 0.12em; border-radius: 50%; background: var(--ink); animation: loader-carousel-lap 2.6s linear infinite; animation-delay: var(--d); }
@keyframes loader-carousel-lap {
  0.00% { transform: translate(0.5400em, 0.4900em) scale(1.150); opacity: 1.00; z-index: 10; }
  2.78% { transform: translate(0.6268em, 0.4865em) scale(1.145); opacity: 0.99; z-index: 10; }
  5.56% { transform: translate(0.7110em, 0.4761em) scale(1.130); opacity: 0.98; z-index: 10; }
  8.33% { transform: translate(0.7900em, 0.4592em) scale(1.106); opacity: 0.95; z-index: 9; }
  11.11% { transform: translate(0.8614em, 0.4362em) scale(1.074); opacity: 0.92; z-index: 9; }
  13.89% { transform: translate(0.9230em, 0.4078em) scale(1.034); opacity: 0.87; z-index: 8; }
  16.67% { transform: translate(0.9730em, 0.3750em) scale(0.988); opacity: 0.82; z-index: 8; }
  19.44% { transform: translate(1.0098em, 0.3387em) scale(0.936); opacity: 0.77; z-index: 7; }
  22.22% { transform: translate(1.0324em, 0.2999em) scale(0.881); opacity: 0.71; z-index: 6; }
  25.00% { transform: translate(1.0400em, 0.2600em) scale(0.825); opacity: 0.65; z-index: 5; }
  27.78% { transform: translate(1.0324em, 0.2201em) scale(0.769); opacity: 0.59; z-index: 4; }
  30.56% { transform: translate(1.0098em, 0.1813em) scale(0.714); opacity: 0.53; z-index: 3; }
  33.33% { transform: translate(0.9730em, 0.1450em) scale(0.663); opacity: 0.48; z-index: 3; }
  36.11% { transform: translate(0.9230em, 0.1122em) scale(0.616); opacity: 0.43; z-index: 2; }
  38.89% { transform: translate(0.8614em, 0.0838em) scale(0.576); opacity: 0.38; z-index: 1; }
  41.67% { transform: translate(0.7900em, 0.0608em) scale(0.544); opacity: 0.35; z-index: 1; }
  44.44% { transform: translate(0.7110em, 0.0439em) scale(0.520); opacity: 0.32; z-index: 0; }
  47.22% { transform: translate(0.6268em, 0.0335em) scale(0.505); opacity: 0.31; z-index: 0; }
  50.00% { transform: translate(0.5400em, 0.0300em) scale(0.500); opacity: 0.30; z-index: 0; }
  52.78% { transform: translate(0.4532em, 0.0335em) scale(0.505); opacity: 0.31; z-index: 0; }
  55.56% { transform: translate(0.3690em, 0.0439em) scale(0.520); opacity: 0.32; z-index: 0; }
  58.33% { transform: translate(0.2900em, 0.0608em) scale(0.544); opacity: 0.35; z-index: 1; }
  61.11% { transform: translate(0.2186em, 0.0838em) scale(0.576); opacity: 0.38; z-index: 1; }
  63.89% { transform: translate(0.1570em, 0.1122em) scale(0.616); opacity: 0.43; z-index: 2; }
  66.67% { transform: translate(0.1070em, 0.1450em) scale(0.662); opacity: 0.47; z-index: 2; }
  69.44% { transform: translate(0.0702em, 0.1813em) scale(0.714); opacity: 0.53; z-index: 3; }
  72.22% { transform: translate(0.0476em, 0.2201em) scale(0.769); opacity: 0.59; z-index: 4; }
  75.00% { transform: translate(0.0400em, 0.2600em) scale(0.825); opacity: 0.65; z-index: 5; }
  77.78% { transform: translate(0.0476em, 0.2999em) scale(0.881); opacity: 0.71; z-index: 6; }
  80.56% { transform: translate(0.0702em, 0.3387em) scale(0.936); opacity: 0.77; z-index: 7; }
  83.33% { transform: translate(0.1070em, 0.3750em) scale(0.988); opacity: 0.82; z-index: 8; }
  86.11% { transform: translate(0.1570em, 0.4078em) scale(1.034); opacity: 0.87; z-index: 8; }
  88.89% { transform: translate(0.2186em, 0.4362em) scale(1.074); opacity: 0.92; z-index: 9; }
  91.67% { transform: translate(0.2900em, 0.4592em) scale(1.106); opacity: 0.95; z-index: 9; }
  94.44% { transform: translate(0.3690em, 0.4761em) scale(1.130); opacity: 0.98; z-index: 10; }
  97.22% { transform: translate(0.4532em, 0.4865em) scale(1.145); opacity: 0.99; z-index: 10; }
  100.00% { transform: translate(0.5400em, 0.4900em) scale(1.150); opacity: 1.00; z-index: 10; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-carousel__dot { animation: none; }
  .loader-carousel__dot:nth-child(1) { transform: translate(0.5400em, 0.4900em) scale(1.150); opacity: 1.00; z-index: 10; }
  .loader-carousel__dot:nth-child(2) { transform: translate(0.8936em, 0.4226em) scale(1.055); opacity: 0.90; z-index: 9; }
  .loader-carousel__dot:nth-child(3) { transform: translate(1.0400em, 0.2600em) scale(0.825); opacity: 0.65; z-index: 5; }
  .loader-carousel__dot:nth-child(4) { transform: translate(0.8936em, 0.0974em) scale(0.595); opacity: 0.40; z-index: 1; }
  .loader-carousel__dot:nth-child(5) { transform: translate(0.5400em, 0.0300em) scale(0.500); opacity: 0.30; z-index: 0; }
  .loader-carousel__dot:nth-child(6) { transform: translate(0.1864em, 0.0974em) scale(0.595); opacity: 0.40; z-index: 1; }
  .loader-carousel__dot:nth-child(7) { transform: translate(0.0400em, 0.2600em) scale(0.825); opacity: 0.65; z-index: 5; }
  .loader-carousel__dot:nth-child(8) { transform: translate(0.1864em, 0.4226em) scale(1.055); opacity: 0.90; z-index: 9; }
}

Neutral

Match my project

Goal: Create a "Carousel" loader.

Visual behavior: A ring of dots seen at an angle turns in depth: the near dots swell and brighten, the far ones shrink and fade.

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.
- One lap round a tipped ring is sampled into keyframes: position on the ellipse, scale, opacity and stacking order all come from how near the dot is.
- Every dot runs the same lap, started an even share of the cycle apart, so they spread evenly round the ring.

Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the dots rest evenly round the tipped ring.

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 "Carousel" loader.

Visual behavior: A ring of dots seen at an angle turns in depth: the near dots swell and brighten, the far ones shrink and fade.

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.
- One lap round a tipped ring is sampled into keyframes: position on the ellipse, scale, opacity and stacking order all come from how near the dot is.
- Every dot runs the same lap, started an even share of the cycle apart, so they spread evenly round the ring.

Accessibility: The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the dots rest evenly round the tipped ring.

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

Install with shadcn

npx shadcn@latest add @movin/loader-carousel

Source on GitHub

About this component

A ring of dots seen at an angle turns in depth: the near dots swell and brighten, the far ones shrink and fade.

Dependencies: None
Difficulty: Intermediate
Triggers: continuous, loop, 3d
Techniques: keyframes, 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 evenly round the tipped ring.

More loaders