∞ 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 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

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.