Progress Lab

Slow Upload Progress Lab

Tunable pacing Smooth custom bars Built-in sample files

This demo keeps AjaxUploader in real chunked-upload mode, then adds a small page-local delay between chunks so you can inspect beautiful progress bars on localhost without needing a slow network.

Queue and pacing controls

Drop files here, browse from disk, or generate sample payloads in the browser. The selected pacing profile applies when you start the queue.

Drop files to begin your progress test

Click anywhere in this panel to browse, or use one of the sample generators below for repeatable progress-bar checks.

Slow mode presets Demo Slow

Delay between chunks 420 ms

Chunk size 192 KB

Smaller chunks plus a larger delay make the animation easier to study. This pacing is simulated on the client side for QA and presentation work.

Sample payloads Queue synthetic files

Ready

Overall progress blends the entire queue into one clean hero bar so you can validate timing, easing, and milestone states at a glance.

Transferred: 0 B of 0 B Pacing: 420 ms delay / 192 KB chunks

Throughput

Live aggregate upload speed.

ETA

Time remaining for the current queue.

Queue

No files

Pending: 0 / Paused: 0

Mood

Demo Slow

Balanced pacing for visual QA.

0% Ready

The ring gives you a second read on the same queue, which is helpful when comparing circular treatments against the main horizontal bar.

Per-file runway

Each card shows the same upload data in a more detailed presentation, including status, transfer rate, ETA, and a simple segment rail.

No files are queued yet. Add one from disk or generate a sample file to start watching the progress bars.

AjaxUploader.create('#progressLabUploader', {
  uploadUrl: uploadUrl,
  chunked: true,
  chunkSize: 192 * 1024,
  autoUpload: false,
  browseButton: '#progressBrowseButton',
  dropTarget: '#progressDrop',
  headers: function () {
    return { 'X-Demo-Chunk-Delay': String(currentDelayMs) };
  },
  onProgress: renderProgressState
});