Fan

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

const T = 3.4;
const RIBS = 13;
const SPAN = 152; // degrees, guard to guard, when open
const STEP = SPAN / (RIBS - 1);
const R = 112; // outer radius
const R0 = 36; // where the paper starts; inside it only the sticks show
const PIVOT = { x: 115, y: 142 };
const CLOSED = -SPAN / 2;
const angle = (i: number) => -SPAN / 2 + i * STEP;
// One pleat: the band of paper between two sticks, as a polygon round the pivot.
const pleat = (() => {
  const pt = (rho: number, a: number) => {
    const rad = (a * Math.PI) / 180;
    return `${(R + rho * Math.sin(rad)).toFixed(1)}px ${(R - rho * Math.cos(rad)).toFixed(1)}px`;
  };
  const arc = (rho: number, from: number, to: number) => Array.from({ length: 4 }, (_, k) => pt(rho, from + ((to - from) * k) / 3));
  return `polygon(${[...arc(R, 0, STEP), ...arc(R0, STEP, 0)].join(', ')})`;
})();

const css = `
  .loader-fan { --paper: light-dark(#f3f4f7, #e5e6e9); --fold: color-mix(in oklab, var(--paper) 78%, light-dark(#6d7179, #7d8087)); --inkline: light-dark(#50535b, #393c41); --wood: light-dark(#5f626a, #7d8087); position: relative; width: 230px; height: 158px; }
  /* The whole fan is held at an angle while shut and swings upright as it opens. */
  .loader-fan__hand { position: absolute; inset: 0; transform-origin: ${PIVOT.x}px ${PIVOT.y}px; filter: drop-shadow(0 8px 10px light-dark(rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.35))); animation: loader-fan-flick ${T}s infinite; }
  .loader-fan__pleat, .loader-fan__stick { position: absolute; transform-origin: 50% 100%; rotate: ${CLOSED}deg; animation: loader-fan-open ${T}s infinite; animation-delay: var(--d); }
  .loader-fan__pleat { left: ${PIVOT.x - R}px; top: ${PIVOT.y - R}px; width: ${2 * R}px; height: ${R}px; clip-path: ${pleat}; background: radial-gradient(circle at 50% 100%, transparent 0 ${R - 22}px, var(--inkline) ${R - 22}px ${R - 19}px, transparent ${R - 19}px ${R - 8}px, var(--inkline) ${R - 8}px ${R - 6}px, transparent ${R - 6}px), radial-gradient(circle at 50% 100%, transparent 0 ${R0 + 24}px, var(--inkline) ${R0 + 24}px ${R0 + 25.5}px, transparent ${R0 + 25.5}px), conic-gradient(from 0deg at 50% 100%, var(--paper) 0deg, var(--fold) ${STEP}deg, var(--paper) 360deg); }
  /* Alternate pleats fold the other way, so their light runs the other way too. */
  .loader-fan__pleat:nth-of-type(even) { background: radial-gradient(circle at 50% 100%, transparent 0 ${R - 22}px, var(--inkline) ${R - 22}px ${R - 19}px, transparent ${R - 19}px ${R - 8}px, var(--inkline) ${R - 8}px ${R - 6}px, transparent ${R - 6}px), radial-gradient(circle at 50% 100%, transparent 0 ${R0 + 24}px, var(--inkline) ${R0 + 24}px ${R0 + 25.5}px, transparent ${R0 + 25.5}px), conic-gradient(from 0deg at 50% 100%, var(--fold) 0deg, var(--paper) ${STEP}deg, var(--fold) 360deg); }
  .loader-fan__stick { left: ${PIVOT.x - 1.5}px; top: ${PIVOT.y - R0 - 6}px; width: 3px; height: ${R0 + 6}px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, color-mix(in oklab, var(--wood) 80%, light-dark(#fbfcfd, #121417)), var(--wood)); }
  .loader-fan__stick--guard { left: ${PIVOT.x - 3}px; top: ${PIVOT.y - R}px; width: 6px; height: ${R}px; border-radius: 3px 3px 1px 1px; box-shadow: 0 0 0 0.5px color-mix(in oklab, light-dark(#fbfcfd, #121417) 40%, transparent); }
  .loader-fan__rivet { position: absolute; left: ${PIVOT.x - 5}px; top: ${PIVOT.y - 5}px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, light-dark(#42454c, #e5e6e9), light-dark(#6d7179, #7d8087)); box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)); }
  @keyframes loader-fan-open {
    0%, 6% { rotate: ${CLOSED}deg; animation-timing-function: cubic-bezier(0.25, 0.9, 0.35, 1.04); }
    34%, 60% { rotate: var(--a); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
    88%, 100% { rotate: ${CLOSED}deg; }
  }
  @keyframes loader-fan-flick {
    0%, 6% { transform: rotate(62deg); animation-timing-function: cubic-bezier(0.25, 0.9, 0.35, 1.04); }
    34% { transform: rotate(0deg); }
    40% { transform: rotate(-3deg); }
    46% { transform: rotate(2.4deg); }
    53% { transform: rotate(-1.6deg); }
    60% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
    88%, 100% { transform: rotate(62deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .loader-fan *, .loader-fan__hand { animation: none !important; }
    .loader-fan__pleat, .loader-fan__stick { rotate: var(--a); }
  }
`;

export function Preview() {
  return (
    <>
      <style href="kit-loaders-fan" precedence="kit">
        {css}
      </style>
      <div className="loader-fan" role="status" aria-label="Loading">
        <span className="loader-fan__hand" aria-hidden="true">
          {Array.from({ length: RIBS - 1 }, (_, i) => (
            <span key={i} className="loader-fan__pleat" style={{ '--a': `${angle(i).toFixed(2)}deg`, '--d': `${i * 14}ms` } as CSSProperties} />
          ))}
          {Array.from({ length: RIBS }, (_, i) => (
            <span
              key={i}
              className={`loader-fan__stick${i === 0 || i === RIBS - 1 ? ' loader-fan__stick--guard' : ''}`}
              style={{ '--a': `${angle(i).toFixed(2)}deg`, '--d': `${i * 14}ms` } as CSSProperties}
            />
          ))}
          <span className="loader-fan__rivet" />
        </span>
      </div>
    </>
  );
}

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

Install with shadcn

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

About this component

A paper folding fan flicks open stick by stick into a half circle, flutters, and folds shut again.

Dependencies
None
Difficulty
Advanced
Triggers
continuous, loop, delay stagger
Techniques
keyframes, clip path, conic gradient, css variables
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 fan rests fully open.

More loaders

See all
Goo
Marble Run
Pencil
Quarters