Tag Archives: progress

Show a Progress Indicator for a Fetch Request with the Streams API

AnthumChris collected some JavaScript scripts to track the progress of fetch requests that download files/data. It works by leveraging the ReadableStream interface from the Streams API. A “simple” example is this: fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg') .then(response => { if (!response.ok) { throw Error(response.status+' '+response.statusText) } if (!response.body) { throw Error('ReadableStream not yet supported in this browser.') } // …

Continue reading “Show a Progress Indicator for a Fetch Request with the Streams API”

Reading Position Indicator

Lately I’ve seen quite a few websites that have some kind of an indicator to display the current reading position (how much you have “read”, depending on how far you have scrolled down an article). In this article, we’ll focus on a technique that uses a horizontal progress bar as the indicator. But instead of …

Continue reading “Reading Position Indicator”

Html5 File Upload with Progress

Html5 finally solves an age old problem of being able to upload files while also showing the upload progress. However it is fairly complicated and not for the faint of heart because you are essentially taking over the entire server side processing (when you tap into the byte stream) and that includes implementing the multipart/form-data …

Continue reading “Html5 File Upload with Progress”