∞ forever components

Loaders

Boiling Coffee Pot

SVG coffee machine: liquid fills and drains in an 8s cycle, a drip falls from the spout, and two steam wisps animate on curved paths above.

svgmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Startup or loading screens needing warmth and playfulness. Coffee apps, productivity tools, or anywhere a narrative loader fits the brand.

When not to

Minimalist or corporate contexts. Requires solid SVG rendering — avoid targeting IE or very old browsers.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change accent to teal by replacing #ff5ca8 on .c13-machine stroke and #22d3ee on .c13-drip/.c13-liquid fill. Speed up the drip by reducing 1.6s on c13-dripping. Make the fill cycle faster by reducing 8s on c13-fill-up. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • machine stroke color (#ff5ca8 on .c13-machine)
  • drip and liquid fill color (#22d3ee on .c13-drip and .c13-liquid)
  • fill cycle duration (8s on c13-fill-up keyframe)
  • drip speed (1.6s on c13-dripping keyframe)
  • steam opacity (stroke rgba 0.45 on .c13-steam)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange pause handler targeting all child elements via querySelectorAll('*')
  • prefers-reduced-motion guard — hides steam and freezes liquid at scaleY(0.6)
  • c13- namespace on all classes
  • transform-origin: 50px 88px on .c13-liquid (fills from the bottom up)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Machine path is hardcoded SVG geometry — resizing the illustration requires adjusting the viewBox and all path coordinates
  • Fill animation uses scaleY which clips to a rectangle — not a true liquid-level curve

coffeepotsteamdripfillsvgnarrativenoveltywarm

More Loaders components

  • Morphing BlobAurora-gradient blob slowly morphs border-radius and rotates, with an inset dark ghost layer counter-rotating. Soft glow on dark backdrop.
  • DNA HelixTwo columns of 10 glowing dots swing left-right in opposite phases, tracing a rotating DNA double helix. Cycling status messages fade in below.
  • Skeleton ShimmerDark content-placeholder card with avatar circle and staggered text bars swept by a looping gold-to-tan shimmer gradient. Pure CSS, no JS logic.
  • Particle Orbit18 glowing iris, cyan, and magenta particles orbit a white core on wobbling elliptical paths; trailing fill creates a comet-like motion blur effect.
  • Concentric PulseFour concentric rings ripple outward in staggered teal, tan, and slate waves from a beating gradient core dot on a dark background.
  • Equalizer BarsSeven pill-shaped vermillion-to-tan gradient bars bounce at staggered offsets, mimicking an audio equalizer. Pure CSS scaleY animation.