Bubble

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

const T = 3.6;
const RING = { x: 66, y: 132 };
const POP = { x: 168, y: 44 };
// Droplets thrown out when the film breaks: direction and distance.
const DROPS = [-160, -110, -60, -10, 40, 90, 140].map((a, i) => ({ a, d: 20 + (i % 3) * 7 }));

const css = `
  .loader-bubble { --film: color-mix(in oklab, light-dark(#373a40, #f1f2f3) 14%, transparent); --rim: color-mix(in oklab, light-dark(#373a40, #f1f2f3) 62%, transparent); --shine: light-dark(#fbfcfd, #f1f2f3); position: relative; width: 230px; height: 186px; }
  /* The wand: a stick and its loop. */
  .loader-bubble__wand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: light-dark(#5f626a, #a7abb2); stroke-linecap: round; }
  /* A bubble is blown out of the loop, swells and drifts free, rises, and pops. */
  .loader-bubble__bubble { position: absolute; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; animation: loader-bubble-path ${T}s cubic-bezier(0.45, 0.1, 0.55, 0.9) infinite; }
  .loader-bubble__bubble--late { animation-delay: ${-T / 2}s; }
  .loader-bubble__bubble--late .loader-bubble__film { scale: 0.78; animation-delay: 0s, ${-T / 2}s; }
  .loader-bubble__film { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 62%, var(--film) 82%, var(--rim) 97%, transparent 100%); animation: loader-bubble-wobble 0.62s ease-in-out infinite alternate, loader-bubble-burst ${T}s linear infinite; }
  /* A slow sheen turning round the film stands in for the colours of a real one. */
  .loader-bubble__film::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, color-mix(in oklab, light-dark(#373a40, #f1f2f3) 16%, transparent) 50deg, transparent 110deg, color-mix(in oklab, light-dark(#373a40, #f1f2f3) 10%, transparent) 220deg, transparent 290deg); -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 92%); mask: radial-gradient(closest-side, transparent 66%, #000 92%); animation: loader-bubble-swirl 2.4s linear infinite; }
  .loader-bubble__film::after { content: ''; position: absolute; left: 15%; top: 13%; width: 38%; height: 38%; border-radius: 50%; border-top: 3px solid var(--shine); border-left: 1px solid transparent; rotate: -38deg; opacity: 0.85; }
  .loader-bubble__glint { position: absolute; right: 26%; bottom: 22%; width: 6px; height: 6px; border-radius: 50%; background: var(--shine); opacity: 0.55; }
  .loader-bubble__drops { position: absolute; left: ${POP.x}px; top: ${POP.y}px; }
  .loader-bubble__drop { position: absolute; width: 3.5px; height: 3.5px; margin: -1.75px; border-radius: 50%; background: var(--rim); opacity: 0; animation: loader-bubble-drop ${T}s ease-out infinite; }
  .loader-bubble__drops--late { animation: none; }
  .loader-bubble__drops--late .loader-bubble__drop { animation-delay: ${-T / 2}s; }
  @keyframes loader-bubble-path {
    0% { transform: translate(${RING.x}px, ${RING.y}px) scale(0.42); opacity: 0; }
    6% { transform: translate(${RING.x}px, ${RING.y}px) scale(0.44); opacity: 1; }
    34% { transform: translate(${RING.x + 22}px, ${RING.y - 22}px) scale(0.95); }
    40% { transform: translate(${RING.x + 30}px, ${RING.y - 32}px) scale(1); }
    62% { transform: translate(${RING.x + 64}px, ${RING.y - 58}px) scale(0.98); }
    81.9% { transform: translate(${POP.x}px, ${POP.y}px) scale(0.97); opacity: 1; }
    84%, 100% { transform: translate(${POP.x}px, ${POP.y}px) scale(1.18); opacity: 0; }
  }
  @keyframes loader-bubble-wobble { from { transform: scale(1.05, 0.95); } to { transform: scale(0.95, 1.05); } }
  @keyframes loader-bubble-burst { 0%, 81% { filter: none; } 84%, 100% { filter: blur(2px); } }
  @keyframes loader-bubble-swirl { to { transform: rotate(1turn); } }
  @keyframes loader-bubble-drop {
    0%, 81.9% { opacity: 0; transform: rotate(var(--a)) translateX(14px); }
    83% { opacity: 1; }
    94%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(10px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .loader-bubble *, .loader-bubble *::before { animation: none !important; }
    .loader-bubble__bubble { transform: translate(${RING.x + 64}px, ${RING.y - 58}px); }
    .loader-bubble__bubble--late { transform: translate(${RING.x + 8}px, ${RING.y - 8}px) scale(0.6); }
  }
`;

export function Preview() {
  return (
    <>
      <style href="kit-loaders-bubble" precedence="kit">
        {css}
      </style>
      <div className="loader-bubble" role="status" aria-label="Loading">
        <svg className="loader-bubble__wand" viewBox="0 0 230 186" aria-hidden="true">
          <path d={`M${RING.x - 40} 184L${RING.x - 11} ${RING.y + 13}`} strokeWidth={4} />
          <circle cx={RING.x} cy={RING.y} r={16} strokeWidth={2.5} />
        </svg>
        {['', ' loader-bubble__bubble--late'].map((late) => (
          <span key={late} className={`loader-bubble__bubble${late}`} aria-hidden="true">
            <span className="loader-bubble__film">
              <i className="loader-bubble__glint" />
            </span>
          </span>
        ))}
        {['', ' loader-bubble__drops--late'].map((late) => (
          <span key={late} className={`loader-bubble__drops${late}`} aria-hidden="true">
            {DROPS.map((d) => (
              <i key={d.a} className="loader-bubble__drop" style={{ '--a': `${d.a}deg`, '--d': `${d.d}px` } as CSSProperties} />
            ))}
          </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-bubble
Source on GitHub

About this component

A soap bubble swells on a wand, wobbles free, floats up with a turning sheen and pops into droplets.

Dependencies
None
Difficulty
Intermediate
Triggers
continuous, loop, keyframe
Techniques
keyframes, conic gradient, filter, 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 one bubble floats free and a smaller one waits on the wand.

More loaders

See all
Carousel
Chase
Coin
Connect