Ajax Bar

In most mobile apps and even some desktop apps, you will most likely have some API communication to a server via an Ajax call. Since these calls can take more than a second or two, it is good UX to offer the user feedback, when such an API call is being made. Which is where QAjaxBar comes into helping you out.

QAjaxBar is a component which displays a loading bar (like Youtube) whenever an Ajax call (regardless of Ajax library used) is in progress. It can be manually triggered as well.

TIP

If you’d like a simpler and more convenient way to offer an Ajax Bar to your users, have a look at the Loading Bar Plugin, which is actually the recommended way.

Installation

Quasar CLI

UMD

Vue CLI

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QAjaxBar'
    ]
  }
}

Usage

The QAjaxBar component captures Ajax calls automatically (unless told not to).

The example below triggers events manually for demonstrating purposes only. This one is set to appear at bottom (multiple positions available!) of the page, with a 10px size (default is different) and uses a custom color.

Please check out the API section for all properties that you can use.

Tips

If multiple events are captured by Ajax Bar simultaneously, @start and @stop will still be triggered only once: when bar starts showing up and when it becomes hidden.
Each Ajax call makes a start() call when it is triggered. When it ends, it calls stop(). So yes, if you also manually trigger QAjaxBar you must call start() each time a new event is starting and stop() each time an event finished. QAjaxBar knows to handle multiple events simultaneously.

QAjaxBar API

Ready for more?