∞ forever components

Loaders

Fruit Watermelon

A CSS watermelon slice (pink semicircle with green rind, white border) bounces gently while three black seeds fall and fade in staggered loops.

csslight complexitymoderate motionmobile-ready

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 →
1

When to use it

Playful loading for food, consumer, or children's apps. Summer or fruit-themed UIs where high whimsy is appropriate.

When not to

Serious or professional contexts. Light backgrounds — fill colors hardcoded dark.

Working with an AI agent

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

Change to a lime by setting .c18-slice background to #4ade80, border-bottom to #166534, and border-left/right to #bbf7d0. Remove seeds by deleting the three .c18-seed divs and their CSS rules. Increase bounce height by changing -12px in c18-bounce to -20px. 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

  • slice flesh color (#ff5ca8 on .c18-slice background)
  • rind color (#10b981 on border-bottom)
  • border/highlight color (#f4f6fb on border-left and border-right)
  • bounce height (-12px in c18-bounce keyframe translateY)
  • seed count (3 .c18-seed divs + matching CSS rules)
  • seed fall distance (35px and 60px translateY in c18-seed-drop keyframe)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange handler — must pause both .c18-slice and all .c18-seed nodes separately
  • border-radius: 0 0 80px 80px — relies on exact 80px/40px width/height ratio for semicircle; changing dimensions requires recalculating
  • c18- namespace on all classes
  • prefers-reduced-motion guard
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Seed positions (left/top values) are hardcoded inside the slice — resizing the slice requires manually recalculating seed coordinates
  • Semicircle shape relies on exact 80px width / 40px height ratio in .c18-slice

watermelonfruitbounceseedsdropplayfulnoveltycsssummerconsumer

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.