Very basic loader functionality // Aurelia (CLI/RequireJS)

app.html

<template>

  <router-view></router-view>

  <div id="page-loading" show.bind="_router.isNavigating">
    <div id="page-loading-inner">
      <!-- Loading animation or text -->
    </div>
  </div>

</template>

loader.js

/**
 * Loader Class
 * @class
 */
export class Loader {

  /**
   * Adds the class the shows the loader on the page
   */
  show() {
    this.loader = document.getElementById('page-loading');
    if (this.loader.classList.contains('aurelia-hide')) {
      this.loader.classList.remove('aurelia-hide');
      this.loader.classList.add('aurelia-show');
    }
  }

  /**
   * Removes the class the shows the loader on the page
   */
  hide() {
    this.loader = document.getElementById('page-loading');
    if (this.loader.classList.contains('aurelia-show')) {
      this.loader.classList.remove('aurelia-show');
      this.loader.classList.add('aurelia-hide');
    }
  }
  
}