Progress bar · real bytes · nothing uploaded
Every percent
is real work.
Most progress bars are animations that guess. This one is driven by actual work. Drop any file and the browser compresses it with gzip, chunk by chunk, and the bar moves exactly as far as the bytes it has read. You get the real speed, the real time left, and at the end how much your file would shrink. Your file never leaves your device.
Waiting for a file
Drop a file anywhere here
Read
—
Speed
—
Time left
—
Gzip size
—
Where the numbers come from
A stream that counts
The file is read as a stream and passed through a small counter before it reaches CompressionStream('gzip'). Every chunk that passes the counter moves the bar. Speed is measured over the last second, and time left comes from that speed.
Why it stays smooth
Eased, but never ahead
The bar eases toward the real value every frame and is drawn with transform instead of width, so the browser never has to redo the layout. It can lag a moment behind the truth, but it never runs ahead of it.
Use it on your site
Plug in a real upload
Swap the gzip step for fetch or XMLHttpRequest upload events and the same bar shows a real upload. Download the code: one HTML file, no library. Works in all modern browsers.