∞ forever components

Product Flows

File Upload Dropzone

A file upload dropzone: files drop into a dashed area one at a time and fill a circular progress ring from 0 to 100 percent, then flip to a success check while a completed list (report.pdf, avatar.png, data.csv) builds up and resets on a loop.

cssmedium complexitysubtle 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

Onboarding flows, file-manager and import screens, upload widgets, drag-and-drop illustrations, and product tour steps that need a lively but calm upload visual.

When not to

A single linear progress bar is enough, or you need a real drag-and-drop upload wired to XHR/fetch — this is a self-running visual demo with simulated files.

Working with an AI agent

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

Edit the files array (name, kind, size, color) to set your own upload queue, and the ramp durations to change pacing. Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. 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

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • file queue (files array: name, kind, size, color per-type tint)
  • pacing (ramp durations: drop 560ms, fill 2000ms, hold 640ms, reset 1600ms)
  • progress-ring size (.fud-ring width) and fill easing (1-Math.pow(1-t,2.2))
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • role=img + aria-label on .fud-stage
  • IIFE wrapper
  • prefers-reduced-motion early return to the populated completed state
  • visibilitychange pause (running flag)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • Files, sizes and progress are simulated on a fixed loop, not wired to a real upload or XHR/fetch

file-uploaddropzoneprogress-ringuploaddrag-dropproduct-flowonboardingfile-manager

More Product Flows components

  • Profile MenuA user account chip that opens a dropdown on a loop — staggering in Profile, Settings, Billing and Sign out, with an org switcher row and a presence dot…