Vue-router top bar animation

[boriscy]

I haven’t found a component that shows a route is loading, I want to add a top line loading animation but I would like to know if there is a way to know what percentage has been loaded, this is important since internet connections here can be very slow.

[rstoenescu]

You are perfectly describing AjaxBar component (http://quasar-framework.org/components/ajax-bar.html), except this component shows for ANY Ajax calls (which is excellent when loading route data too). Quasar uses Webpack chunk loading (which happens through Ajax) for Vue routes.

[smakinson]

Has webpack changed the way it loads? I am dropping the ajax bar in and I see it run with hotmodule reloads, but not routes. In the network tab on devtools It looks like the type for the chucks is script and not xhr. It can be setup to run with the before and after route guards easily but I did see some occasional console errors about cant call start on undefined. ( can check for it, just didn’t expect the ref to not exist on occasion ) Thoughts? I kinda want to do a semitransparent bar across where my content would appear similar ( but smaller ) to what I see on dashradio, so may not go this route anyway, but I thought I’d post what I am seeing.