Ferris wheel

No dependencies
Code format
React + Tailwind
import type { CSSProperties } from 'react';

const css = `
  @keyframes loader-ferris-turn { to { transform: rotate(360deg); } }
  @keyframes loader-ferris-level { to { transform: rotate(-360deg); } }
  @keyframes loader-ferris-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
  @keyframes loader-ferris-bulb { 0%, 100% { opacity: 0.25; } 12% { opacity: 1; } 40% { opacity: 0.25; } }
  .loader-ferris { position: relative; width: 124px; height: 120px; }
  .loader-ferris svg { width: 100%; height: 100%; overflow: visible; }
  .loader-ferris__leg { fill: none; stroke: light-dark(#cbced3, #393c41); stroke-width: 3.5; stroke-linecap: round; }
  .loader-ferris__brace { stroke: light-dark(#cbced3, #393c41); stroke-width: 2; }
  .loader-ferris__ground { stroke: light-dark(#6d7179, #7d8087); stroke-width: 3; stroke-linecap: round; }
  .loader-ferris__wheel { transform-origin: 56px 46px; animation: loader-ferris-turn 9s linear infinite; }
  .loader-ferris__rim { fill: none; stroke: light-dark(#6d7179, #7d8087); stroke-width: 2; }
  .loader-ferris__rim--in { stroke: light-dark(#cbced3, #393c41); stroke-width: 1.2; }
  .loader-ferris__truss { fill: none; stroke: light-dark(#cbced3, #393c41); stroke-width: 1; stroke-linejoin: round; }
  .loader-ferris__spoke { stroke: light-dark(#6d7179, #7d8087); stroke-width: 1.1; }
  .loader-ferris__hub { fill: light-dark(#5f626a, #a7abb2); stroke: light-dark(#cbced3, #393c41); stroke-width: 1.5; }
  .loader-ferris__bulb { fill: light-dark(#373a40, #f1f2f3); opacity: 0.25; animation: loader-ferris-bulb 1.6s linear infinite var(--d); }
  /* Each cabin turns back against the wheel so it hangs level, and sways on its own hook. */
  .loader-ferris__level { animation: loader-ferris-level 9s linear infinite; }
  .loader-ferris__swing { animation: loader-ferris-swing 1.8s ease-in-out infinite var(--d); }
  .loader-ferris__hook { stroke: light-dark(#6d7179, #7d8087); stroke-width: 1.2; }
  .loader-ferris__cabin { fill: light-dark(#5f626a, #a7abb2); }
  .loader-ferris__roof { fill: light-dark(#50535b, #c6c8cd); }
  .loader-ferris__window { fill: light-dark(#ebedf0, #232529); }
  @media (prefers-reduced-motion: reduce) {
    .loader-ferris__wheel, .loader-ferris__level, .loader-ferris__swing, .loader-ferris__bulb { animation: none; }
    .loader-ferris__bulb { opacity: 0.7; }
  }
`;

const R = 36;
const rad = (a: number) => (a * Math.PI) / 180;
const at = (a: number, r: number) => [56 + r * Math.cos(rad(a)), 46 + r * Math.sin(rad(a))].map((v) => +v.toFixed(2));
const CABINS = Array.from({ length: 8 }, (_, i) => i * 45);
const BULBS = Array.from({ length: 16 }, (_, i) => i * 22.5 + 11.25);
// A zigzag of struts between the two rims.
const TRUSS = Array.from({ length: 33 }, (_, i) => at(i * 11.25, i % 2 ? R - 5 : R).join(' ')).join('L');

export function FerrisLoader() {
  return (
    <>
      <style>
        {css}
      </style>
      <div className="loader-ferris" role="status" aria-label="Loading">
        <svg viewBox="0 0 112 108" aria-hidden="true">
          <path className="loader-ferris__leg" d="M56 46L32 102M56 46L80 102" />
          <path className="loader-ferris__brace" d="M41 82H71" />
          <path className="loader-ferris__ground" d="M22 102H90" />
          <g className="loader-ferris__wheel">
            {CABINS.map((a) => (
              <line key={a} className="loader-ferris__spoke" x1="56" y1="46" x2={at(a, R)[0]} y2={at(a, R)[1]} />
            ))}
            <path className="loader-ferris__truss" d={`M${TRUSS}`} />
            <circle className="loader-ferris__rim" cx="56" cy="46" r={R} />
            <circle className="loader-ferris__rim loader-ferris__rim--in" cx="56" cy="46" r={R - 5} />
            {BULBS.map((a, i) => (
              <circle key={a} className="loader-ferris__bulb" cx={at(a, R)[0]} cy={at(a, R)[1]} r="1.3" style={{ '--d': `${(-i * 0.1).toFixed(1)}s` } as CSSProperties} />
            ))}
            {CABINS.map((a, i) => (
              <g key={a} transform={`translate(${at(a, R).join(' ')})`}>
                <g className="loader-ferris__level">
                  <g className="loader-ferris__swing" style={{ '--d': `${(-i * 0.37).toFixed(2)}s` } as CSSProperties}>
                    <line className="loader-ferris__hook" x1="0" y1="0" x2="0" y2="3.5" />
                    <path className="loader-ferris__cabin" d="M-5.5 4H5.5L5 12Q5 13.5 3.5 13.5H-3.5Q-5 13.5 -5 12Z" />
                    <path className="loader-ferris__roof" d="M-7 5Q0 0.5 7 5Z" />
                    <rect className="loader-ferris__window" x="-3.5" y="6.5" width="7" height="3" rx="1" />
                  </g>
                </g>
              </g>
            ))}
            <circle className="loader-ferris__hub" cx="56" cy="46" r="4" />
          </g>
        </svg>
      </div>
    </>
  );
}

Free to use in any project, commercial included. MIT-0, no attribution required. Licence

Install with shadcn

npx shadcn@latest add @movin/loader-ferris
Source on GitHub

About this component

A ferris wheel turning slowly with chase lights running round the rim, its cabins hanging level and swinging gently as they go.

Dependencies
None
Difficulty
Intermediate
Triggers
continuous, loop, glow, delay stagger
Techniques
keyframes, stagger, svg
Reduced motion
Respected
Theme
Light and dark (follows your page's color-scheme)

The root has role="status" and aria-label="Loading"; everything inside is decorative. Under prefers-reduced-motion the wheel is still and the lights stay on.

More loaders

See all
Geneva drive
Hamster
Jellyfish
Juggle