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.

Installation

// 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