I tested your real-time-preloader → but due to the fact that it is fired by NPM-Lib, it is not indicating that accurate.
I compared it to my own generated one, which you will be able to see on the very top on the following site…
This PRELOADER works very precise and loads almost in 9 of 10 loading-processes very exactly, giving you even the percentage). But even this one is still not a 100% REAL-TIME-PRELOADER out of my view.
The version you use (PACE) ends the loading process displaying, before or after the page has been loaded completely and i think it looses 500ms for loading the pace-lib (at least 500ms were mentioned in the DOCS).
So if you really want to have a perfect and very accurate PRELOADER, you code it yourself, without any use of addinional LIBRARIES (which will comsume even more loading time).
But for ordinary preloader, this is a very nice and simple PRELOADER-SOLUTION → THUMBS-UP 
Oh, and do not care about this one…
…on the right side → it is just a loading gif, which i forgot to remove. 
This was my old pseudo-preloader 
working on the page directly.
For better visual comparisson, i activated both versions. Now you are able to see both PRELOADERS in action…
Do the PRELOADER-TESTINGS about 10x and you will see the difference.