∞ forever components

Loaders

Fruit Orange

SVG orange cross-section: 8 wedge segments pulse amber-to-orange in a sequential wave while the whole slice rotates slowly on an 8s spin.

svglight 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 indicators for food, health, or consumer apps. Anywhere a fruit motif or warm radial spinner fits the brand.

When not to

Corporate or enterprise contexts. Background hardcoded dark — needs CSS override for light themes.

Working with an AI agent

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

Change to a lemon by updating .c14-peel stroke to #facc15 and both fill values in c14-pulse keyframe from #f59e0b/#ff781f to #fef08a/#facc15. Stop rotation by setting animation: none on .c14-orange. Reduce to 6 segments by deleting the last two nth-child rules and two path elements. 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

  • peel stroke color (#f97316 on .c14-peel)
  • segment pulse colors (#f59e0b and #ff781f inside c14-pulse keyframe)
  • spin speed (8s on .c14-orange animation)
  • pulse wave delay increment (0.2s per nth-child)
  • segment count (nth-child rules + matching path elements in SVG)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • transform-origin: 60px 60px on .c14-segment — rotation pivot at SVG center; wrong value breaks the wave
  • visibilitychange pause handler for both .c14-orange and all .c14-segment nodes
  • prefers-reduced-motion guard
  • c14- namespace on all classes
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • All 8 segment path elements share the identical d attribute — position comes from nth-child rotate transforms only; adding a 9th segment requires both a new path element and a new nth-child rule
  • Background hardcoded in body CSS

orangefruitsegmentsspinnerradialpulsesvgplayfulwave

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.