Loading with Progress Bar

Progress bar project

If you’ve ever implemented a loading bar that pulled together many different bits, you know how irritating it can be to wrangle all those requests together.

AJAX requests

Common pre-observable asynchronous patterns plan for only one listener for each event. This results in ridiculous loading bar hacks, like adding a function call to every load event or monkey patchingMonkey patching is a technique to add, modify, or suppress the default behavior of a piece of code at runtime without changing its original source code. XMLHttpRequest.

Using RxJS, our software never leaves our users waiting at 99% (not that I’m bitter).

progress event of XMLHttpRequest

📝 In the following example, the progress bar represents multiple requests. It’s also possible to use the same strategies to represent a single large request by listening in to the progress event of an XMLHttpRequest.

Let’s start out with 100 requests from the ajax constructor, all collected together in an array.

Let’s RUN the code and see what happens.