chore(build): rename ionic directory to src and update all references in the build process.

src/components/loading/loading.ios.scss

@@ -0,0 +1,73 @@
+@import "../../globals.core";
+@import "./loading";
+
+// iOS Loading Indicator
+// --------------------------------------------------
+
+$loading-ios-padding:                   24px 34px !default;
+$loading-ios-max-width:                 270px !default;
+$loading-ios-max-height:                90% !default;
+$loading-ios-border-radius:             8px !default;
+$loading-ios-text-color:                #000 !default;
+$loading-ios-background:                #f8f8f8 !default;
+
+$loading-ios-content-font-weight:       bold !default;
+
+$loading-ios-spinner-color:             #69717d !default;
+
+$loading-ios-spinner-ios-color:         $loading-ios-spinner-color !default;
+$loading-ios-spinner-bubbles-color:     $loading-ios-spinner-color !default;
+$loading-ios-spinner-circles-color:     $loading-ios-spinner-color !default;
+$loading-ios-spinner-crescent-color:    $loading-ios-spinner-color !default;
+$loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
+
+
+.loading-wrapper {
+  padding: $loading-ios-padding;
+
+  max-width: $loading-ios-max-width;
+  max-height: $loading-ios-max-height;
+
+  border-radius: $loading-ios-border-radius;
+  color: $loading-ios-text-color;
+  background: $loading-ios-background;
+}
+
+
+// iOS Loading Content
+// -----------------------------------------
+
+.loading-content {
+  font-weight: $loading-ios-content-font-weight;
+}
+
+.loading-spinner + .loading-content {
+  margin-left: 16px;
+}
+
+
+// iOS Loading Spinner fill colors
+// -----------------------------------------
+
+.loading-spinner {
+  .spinner-ios line,
+  .spinner-ios-small line {
+    stroke: $loading-ios-spinner-ios-color;
+  }
+
+  .spinner-bubbles circle {
+    fill: $loading-ios-spinner-bubbles-color;
+  }
+
+  .spinner-circles circle {
+    fill: $loading-ios-spinner-circles-color;
+  }
+
+  .spinner-crescent circle {
+    stroke: $loading-ios-spinner-crescent-color;
+  }
+
+  .spinner-dots circle {
+    fill: $loading-ios-spinner-dots-color;
+  }
+}

src/components/loading/loading.md.scss

@@ -0,0 +1,71 @@
+@import "../../globals.core";
+@import "./loading";
+
+// Material Design Loading Indicator
+// --------------------------------------------------
+
+$loading-md-padding:                   24px !default;
+$loading-md-max-width:                 280px !default;
+$loading-md-max-height:                90% !default;
+$loading-md-border-radius:             2px !default;
+$loading-md-text-color:                rgba(0, 0, 0, .5) !default;
+$loading-md-background:                #fafafa !default;
+$loading-md-box-shadow-color:          rgba(0, 0, 0, .4) !default;
+$loading-md-box-shadow:                0 16px 20px $loading-md-box-shadow-color !default;
+
+$loading-md-spinner-color:             color($colors-md, primary) !default;
+
+$loading-md-spinner-ios-color:         $loading-md-spinner-color !default;
+$loading-md-spinner-bubbles-color:     $loading-md-spinner-color !default;
+$loading-md-spinner-circles-color:     $loading-md-spinner-color !default;
+$loading-md-spinner-crescent-color:    $loading-md-spinner-color !default;
+$loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
+
+
+.loading-wrapper {
+  padding: $loading-md-padding;
+
+  max-width: $loading-md-max-width;
+  max-height: $loading-md-max-height;
+
+  border-radius: $loading-md-border-radius;
+  color: $loading-md-text-color;
+  background: $loading-md-background;
+
+  box-shadow: $loading-md-box-shadow;
+}
+
+
+// Material Design Loading Content
+// -----------------------------------------
+
+.loading-spinner + .loading-content {
+  margin-left: 16px;
+}
+
+
+// Material Design Loading Spinner fill colors
+// -----------------------------------------
+
+.loading-spinner {
+  .spinner-ios line,
+  .spinner-ios-small line {
+    stroke: $loading-md-spinner-ios-color;
+  }
+
+  .spinner-bubbles circle {
+    fill: $loading-md-spinner-bubbles-color;
+  }
+
+  .spinner-circles circle {
+    fill: $loading-md-spinner-circles-color;
+  }
+
+  .spinner-crescent circle {
+    stroke: $loading-md-spinner-crescent-color;
+  }
+
+  .spinner-dots circle {
+    fill: $loading-md-spinner-dots-color;
+  }
+}

src/components/loading/loading.scss

@@ -0,0 +1,35 @@
+@import "../../globals.core";
+
+// Loading Indicator
+// --------------------------------------------------
+
+
+ion-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-wrapper {
+  z-index: $z-index-overlay-wrapper;
+  display: flex;
+
+  align-items: center;
+
+  opacity: 0;
+}
+
+// Loading Backdrop
+// -----------------------------------------
+
+.hide-backdrop {
+  display: none;
+}

src/components/loading/loading.ts

@@ -0,0 +1,363 @@
+import {Component, Renderer, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
+
+import {Animation} from '../../animations/animation';
+import {Transition, TransitionOptions} from '../../transitions/transition';
+import {Config} from '../../config/config';
+import {isPresent, isUndefined, isDefined} from '../../util/util';
+import {NavParams} from '../nav/nav-params';
+import {ViewController} from '../nav/view-controller';
+
+
+/**
+ * @name Loading
+ * @description
+ * An overlay that can be used to indicate activity while blocking user
+ * interaction. The loading indicator appears on top of the app's content,
+ * and can be dismissed by the app to resume user interaction with
+ * the app. It includes an optional backdrop, which can be disabled
+ * by setting `showBackdrop: false` upon creation.
+ *
+ * ### Creating
+ * You can pass all of the loading options in the first argument of
+ * the create method: `Loading.create(opts)`. The spinner name should be
+ * passed in the `spinner` property, and any optional HTML can be passed
+ * in the `content` property. If you do not pass a value to `spinner`
+ * the loading indicator will use the spinner specified by the mode. To
+ * set the spinner name across the app, set the value of `loadingSpinner`
+ * in your app's config. To hide the spinner, set `loadingSpinner: 'hide'`
+ * in the app's config or pass `spinner: 'hide'` in the loading
+ * options. See the [create](#create) method below for all available options.
+ *
+ * ### Dismissing
+ * The loading indicator can be dismissed automatically after a specific
+ * amount of time by passing the number of milliseconds to display it in
+ * the `duration` of the loading options. By default the loading indicator
+ * will show even during page changes, but this can be disabled by setting
+ * `dismissOnPageChange` to `true`. To dismiss the loading indicator after
+ * creation, call the `dismiss()` method on the Loading instance. The
+ * `onDismiss` function can be called to perform an action after the loading
+ * indicator is dismissed.
+ *
+ * >Note that after the component is dismissed, it will not be usable anymore
+ * and another one must be created. This can be avoided by wrapping the
+ * creation and presentation of the component in a reusable function as shown
+ * in the `usage` section below.
+ *
+ * ### Limitations
+ * The element is styled to appear on top of other content by setting its
+ * `z-index` property. You must ensure no element has a stacking context with
+ * a higher `z-index` than this element.
+ *
+ * @usage
+ * ```ts
+ * constructor(nav: NavController) {
+ *   this.nav = nav;
+ * }
+ *
+ * presentLoadingDefault() {
+ *   let loading = Loading.create({
+ *     content: 'Please wait...'
+ *   });
+ *
+ *   this.nav.present(loading);
+ *
+ *   setTimeout(() => {
+ *     loading.dismiss();
+ *   }, 5000);
+ * }
+ *
+ * presentLoadingCustom() {
+ *   let loading = Loading.create({
+ *     spinner: 'hide',
+ *     content: `
+ *       <div class="custom-spinner-container">
+ *         <div class="custom-spinner-box"></div>
+ *       </div>`,
+ *     duration: 5000
+ *   });
+ *
+ *   loading.onDismiss(() => {
+ *     console.log('Dismissed loading');
+ *   });
+ *
+ *   this.nav.present(loading);
+ * }
+ *
+ * presentLoadingText() {
+ *   let loading = Loading.create({
+ *     spinner: 'hide',
+ *     content: 'Loading Please Wait...'
+ *   });
+ *
+ *   this.nav.present(loading);
+ *
+ *   setTimeout(() => {
+ *     this.nav.push(Page2);
+ *   }, 1000);
+ *
+ *   setTimeout(() => {
+ *     loading.dismiss();
+ *   }, 5000);
+ * }
+ * ```
+ *
+ * @demo /docs/v2/demos/loading/
+ * @see {@link /docs/v2/api/components/spinner/Spinner Spinner API Docs}
+ */
+export class Loading extends ViewController {
+
+  constructor(opts: LoadingOptions = {}) {
+    opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true;
+    opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
+
+    super(LoadingCmp, opts);
+    this.viewType = 'loading';
+    this.isOverlay = true;
+    this.usePortal = true;
+
+    // by default, loading indicators should not fire lifecycle events of other views
+    // for example, when an loading indicators enters, the current active view should
+    // not fire its lifecycle events because it's not conceptually leaving
+    this.fireOtherLifecycles = false;
+  }
+
+   /**
+   * @private
+   */
+   getTransitionName(direction: string) {
+     let key = (direction === 'back' ? 'loadingLeave' : 'loadingEnter');
+     return this._nav && this._nav.config.get(key);
+   }
+
+   /**
+    * Create a loading indicator with the following options
+    *
+    * | Option                | Type       | Description                                                                                                      |
+    * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------|
+    * | spinner               |`string`    | The name of the SVG spinner for the loading indicator.                                                           |
+    * | content               |`string`    | The html content for the loading indicator.                                                                      |
+    * | cssClass              |`string`    | An additional class for custom styles.                                                                           |
+    * | showBackdrop          |`boolean`   | Whether to show the backdrop. Default true.                                                                      |
+    * | dismissOnPageChange   |`boolean`   | Whether to dismiss the indicator when navigating to a new page. Default false.                                   |
+    * | duration              |`number`    | How many milliseconds to wait before hiding the indicator. By default, it will show until `dismiss()` is called. |
+    *
+    *
+    * @param {object} opts Loading options
+    */
+   static create(opts: LoadingOptions = {}) {
+     return new Loading(opts);
+   }
+
+ }
+
+/**
+* @private
+*/
+@Component({
+  selector: 'ion-loading',
+  template:
+    '<div disable-activated class="backdrop" [class.hide-backdrop]="!d.showBackdrop" role="presentation"></div>' +
+    '<div class="loading-wrapper">' +
+      '<div *ngIf="showSpinner" class="loading-spinner">' +
+        '<ion-spinner [name]="d.spinner"></ion-spinner>' +
+      '</div>' +
+      '<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>' +
+    '</div>',
+  host: {
+    'role': 'dialog'
+  },
+  encapsulation: ViewEncapsulation.None,
+})
+class LoadingCmp {
+  private d: any;
+  private id: number;
+  private created: number;
+  private showSpinner: boolean;
+
+  constructor(
+    private _viewCtrl: ViewController,
+    private _config: Config,
+    private _elementRef: ElementRef,
+    params: NavParams,
+    renderer: Renderer
+  ) {
+    this.d = params.data;
+    this.created = Date.now();
+
+    if (this.d.cssClass) {
+      renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
+    }
+
+    this.id = (++loadingIds);
+  }
+
+  ngOnInit() {
+    // If no spinner was passed in loading options we need to fall back
+    // to the loadingSpinner in the app's config, then the mode spinner
+    if (isUndefined(this.d.spinner)) {
+      this.d.spinner = this._config.get('loadingSpinner', this._config.get('spinner', 'ios'));
+    }
+
+    // If the user passed hide to the spinner we don't want to show it
+    this.showSpinner = isDefined(this.d.spinner) && this.d.spinner !== 'hide';
+  }
+
+  onPageDidEnter() {
+    let activeElement: any = document.activeElement;
+    if (document.activeElement) {
+      activeElement.blur();
+    }
+
+    // If there is a duration, dismiss after that amount of time
+    this.d.duration ? setTimeout(() => this.dismiss('backdrop'), this.d.duration) : null;
+  }
+
+  dismiss(role): Promise<any> {
+    return this._viewCtrl.dismiss(null, role);
+  }
+
+  isEnabled() {
+    let tm = this._config.getNumber('overlayCreatedDiff', 750);
+    return (this.created + tm < Date.now());
+  }
+}
+
+export interface LoadingOptions {
+  spinner?: string;
+  content?: string;
+  cssClass?: string;
+  showBackdrop?: boolean;
+  dismissOnPageChange?: boolean;
+  delay?: number;
+  duration?: number;
+}
+
+/**
+ * Animations for loading
+ */
+ class LoadingPopIn extends Transition {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+     super(opts);
+
+     let ele = enteringView.pageRef().nativeElement;
+     let backdrop = new Animation(ele.querySelector('.backdrop'));
+     let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
+
+     wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
+     backdrop.fromTo('opacity', '0.01', '0.3');
+
+     this
+       .easing('ease-in-out')
+       .duration(200)
+       .add(backdrop)
+       .add(wrapper);
+   }
+ }
+ Transition.register('loading-pop-in', LoadingPopIn);
+
+
+ class LoadingPopOut extends Transition {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+     super(opts);
+
+     let ele = leavingView.pageRef().nativeElement;
+     let backdrop = new Animation(ele.querySelector('.backdrop'));
+     let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
+
+     wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
+     backdrop.fromTo('opacity', '0.3', '0');
+
+     this
+       .easing('ease-in-out')
+       .duration(200)
+       .add(backdrop)
+       .add(wrapper);
+   }
+ }
+ Transition.register('loading-pop-out', LoadingPopOut);
+
+
+ class LoadingMdPopIn extends Transition {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+     super(opts);
+
+     let ele = enteringView.pageRef().nativeElement;
+     let backdrop = new Animation(ele.querySelector('.backdrop'));
+     let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
+
+     wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
+     backdrop.fromTo('opacity', '0.01', '0.50');
+
+     this
+       .easing('ease-in-out')
+       .duration(200)
+       .add(backdrop)
+       .add(wrapper);
+   }
+ }
+ Transition.register('loading-md-pop-in', LoadingMdPopIn);
+
+
+ class LoadingMdPopOut extends Transition {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+     super(opts);
+
+     let ele = leavingView.pageRef().nativeElement;
+     let backdrop = new Animation(ele.querySelector('.backdrop'));
+     let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
+
+     wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
+     backdrop.fromTo('opacity', '0.50', '0');
+
+     this
+       .easing('ease-in-out')
+       .duration(200)
+       .add(backdrop)
+       .add(wrapper);
+   }
+ }
+ Transition.register('loading-md-pop-out', LoadingMdPopOut);
+
+
+ class LoadingWpPopIn extends Transition {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+     super(opts);
+
+     let ele = enteringView.pageRef().nativeElement;
+     let backdrop = new Animation(ele.querySelector('.backdrop'));
+     let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
+
+     wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
+     backdrop.fromTo('opacity', '0.01', '0.16');
+
+     this
+       .easing('cubic-bezier(0,0 0.05,1)')
+       .duration(200)
+       .add(backdrop)
+       .add(wrapper);
+   }
+ }
+ Transition.register('loading-wp-pop-in', LoadingWpPopIn);
+
+
+ class LoadingWpPopOut extends Transition {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+     super(opts);
+
+     let ele = leavingView.pageRef().nativeElement;
+     let backdrop = new Animation(ele.querySelector('.backdrop'));
+     let wrapper = new Animation(ele.querySelector('.loading-wrapper'));
+
+     wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
+     backdrop.fromTo('opacity', '0.16', '0');
+
+     this
+       .easing('ease-out')
+       .duration(150)
+       .add(backdrop)
+       .add(wrapper);
+   }
+ }
+ Transition.register('loading-wp-pop-out', LoadingWpPopOut);
+
+let loadingIds = -1;

src/components/loading/loading.wp.scss

@@ -0,0 +1,67 @@
+@import "../../globals.core";
+@import "./loading";
+
+// Windows Loading Indicator
+// --------------------------------------------------
+
+$loading-wp-padding:                   20px !default;
+$loading-wp-max-width:                 280px !default;
+$loading-wp-max-height:                90% !default;
+$loading-wp-border-radius:             2px !default;
+$loading-wp-text-color:                #fff !default;
+$loading-wp-background:                #000 !default;
+
+$loading-wp-spinner-color:             $loading-wp-text-color !default;
+
+$loading-wp-spinner-ios-color:         $loading-wp-spinner-color !default;
+$loading-wp-spinner-bubbles-color:     $loading-wp-spinner-color !default;
+$loading-wp-spinner-circles-color:     $loading-wp-spinner-color !default;
+$loading-wp-spinner-crescent-color:    $loading-wp-spinner-color !default;
+$loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
+
+
+.loading-wrapper {
+  padding: $loading-wp-padding;
+
+  max-width: $loading-wp-max-width;
+  max-height: $loading-wp-max-height;
+
+  border-radius: $loading-wp-border-radius;
+  color: $loading-wp-text-color;
+  background: $loading-wp-background;
+}
+
+
+// Windows Loading Content
+// -----------------------------------------
+
+.loading-spinner + .loading-content {
+  margin-left: 16px;
+}
+
+
+// Windows Loading Spinner fill colors
+// -----------------------------------------
+
+.loading-spinner {
+  .spinner-ios line,
+  .spinner-ios-small line {
+    stroke: $loading-wp-spinner-ios-color;
+  }
+
+  .spinner-bubbles circle {
+    fill: $loading-wp-spinner-bubbles-color;
+  }
+
+  .spinner-circles circle {
+    fill: $loading-wp-spinner-circles-color;
+  }
+
+  .spinner-crescent circle {
+    stroke: $loading-wp-spinner-crescent-color;
+  }
+
+  .spinner-dots circle {
+    fill: $loading-wp-spinner-dots-color;
+  }
+}

src/components/loading/test/basic/e2e.ts

@@ -0,0 +1,4 @@
+
+it('should open default spinner', function() {
+  element(by.css('.e2eLoadingDefaultSpinner')).click();
+});

src/components/loading/test/basic/index.ts

@@ -0,0 +1,237 @@
+import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../ionic';
+
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  constructor(private nav: NavController, private platform: Platform) {}
+
+  presentLoadingIos() {
+    let loading = Loading.create({
+      spinner: 'ios',
+      duration: 1000,
+      cssClass: 'my-custom-loader'
+    });
+
+    loading.onDismiss(() => {
+     console.log('Dismissed loading');
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingDots() {
+    let loading = Loading.create({
+      spinner: 'dots',
+      content: 'Loading...',
+      duration: 1000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingBubbles() {
+    let loading = Loading.create({
+      spinner: 'bubbles',
+      content: 'Loading...',
+      duration: 1000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingCircles() {
+    let loading = Loading.create({
+      spinner: 'circles',
+      content: 'Loading...',
+      duration: 1000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingCrescent() {
+    let loading = Loading.create({
+      spinner: 'crescent',
+      content: 'Please wait...',
+      duration: 1000
+    });
+
+    this.nav.present(loading);
+  }
+
+  // Pass the fixed-spinner class so we can turn off
+  // spinner animation for the e2e test
+  presentLoadingDefault() {
+    let loading = Loading.create({
+      content: 'Please wait...',
+      cssClass: 'fixed-spinner'
+    });
+
+    this.nav.present(loading);
+
+    setTimeout(() => {
+      loading.dismiss();
+    }, 5000);
+  }
+
+  presentLoadingCustom() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: `
+        <div class="custom-spinner-container">
+          <div class="custom-spinner-box"></div>
+        </div>`,
+      duration: 1000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingText() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: 'Loading Please Wait...'
+    });
+
+    this.nav.present(loading);
+
+    setTimeout(() => {
+      this.nav.push(Page2);
+    }, 1000);
+
+    setTimeout(() => {
+      loading.dismiss();
+    }, 5000);
+  }
+
+  goToPage2() {
+    this.nav.push(Page2);
+  }
+
+  presentLoadingMultiple() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 1 Please Wait...'
+    });
+
+    this.nav.present(loading);
+
+    let loading2 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 2 Please Wait...'
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading2);
+    }, 1000);
+
+    let loading3 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 3 Please Wait...'
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading3);
+
+      setTimeout(() => {
+        loading3.dismiss();
+      }, 1000);
+
+      setTimeout(() => {
+        loading2.dismiss();
+      }, 2000);
+
+      setTimeout(() => {
+        loading.dismiss();
+      }, 3000);
+    }, 2000);
+
+  }
+
+  presentLoadingMultipleNav() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 1 Please Wait...',
+      dismissOnPageChange: true
+    });
+
+    this.nav.present(loading);
+
+    let loading2 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 2 Please Wait...',
+      dismissOnPageChange: true
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading2);
+    }, 500);
+
+    let loading3 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 3 Please Wait...',
+      dismissOnPageChange: true
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading3);
+
+      setTimeout(() => {
+        this.nav.push(Page2);
+      }, 1000);
+    }, 1000);
+  }
+}
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Page 2</ion-title>
+    </ion-navbar>
+    <ion-content padding>Some content</ion-content>
+    <ion-toolbar position="bottom">
+      <ion-buttons end>
+        <button (click)="goToPage3()">
+          Navigate
+          <ion-icon name="arrow-forward"></ion-icon>
+        </button>
+      </ion-buttons>
+    </ion-toolbar>
+  `
+})
+class Page2 {
+  constructor(private nav: NavController, private platform: Platform) {}
+
+  onPageLoaded() {
+    setTimeout(() => {
+      this.nav.push(Page3);
+    }, 1000);
+  }
+
+  goToPage3() {
+    this.nav.push(Page3);
+  }
+}
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Page 3</ion-title>
+    </ion-navbar>
+    <ion-content padding>Some content</ion-content>
+  `
+})
+class Page3 {
+  constructor(private nav: NavController, private platform: Platform) {}
+}
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+}
+
+document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

src/components/loading/test/basic/main.html

@@ -0,0 +1,26 @@
+
+<ion-navbar *navbar>
+  <ion-title>Loading</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <button block (click)="presentLoadingIos()">iOS Spinner</button>
+  <button block (click)="presentLoadingDots()">Dots Spinner</button>
+  <button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
+  <button block (click)="presentLoadingCircles()">Circles Spinner</button>
+  <button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
+  <button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
+  <button block (click)="presentLoadingCustom()" light>Custom Spinner</button>
+  <button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
+  <button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
+  <button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
+</ion-content>
+
+<ion-toolbar position="bottom">
+  <ion-buttons end>
+    <button (click)="goToPage2()">
+      Navigate
+      <ion-icon name="arrow-forward"></ion-icon>
+    </button>
+  </ion-buttons>
+</ion-toolbar>

src/components/loading/test/basic/styles.css

@@ -0,0 +1,61 @@
+/* Fix the spinner used in e2e */
+.fixed-spinner svg {
+  animation: none;
+}
+
+.custom-spinner-container {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.custom-spinner-box {
+  position: relative;
+  box-sizing: border-box;
+  border: 4px solid #000;
+  width: 60px;
+  height: 60px;
+  animation: spin 3s infinite linear;
+}
+
+.custom-spinner-box:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  border: 4px solid #000;
+  width: 40px;
+  height: 40px;
+  animation: pulse 1.5s infinite ease;
+}
+
+.wp .custom-spinner-box,
+.wp .custom-spinner-box:before {
+  border-color: #fff;
+}
+
+@-webkit-keyframes pulse {
+  50% {
+    border-width: 20px;
+  }
+}
+@keyframes pulse {
+  50% {
+    border-width: 20px;
+  }
+}
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}

src/components/loading/test/tabs/e2e.ts

@@ -0,0 +1,4 @@
+
+it('should show default spinner', function() {
+  element(by.css('.e2eLoadingTabsContent')).click();
+});

src/components/loading/test/tabs/index.ts

@@ -0,0 +1,74 @@
+import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../ionic';
+
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  constructor(private nav: NavController, private platform: Platform) {}
+
+  presentLoading() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: 'Loading...',
+      duration: 1000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingNav() {
+    let loading = Loading.create({
+      content: 'Please wait...',
+    });
+
+    this.nav.present(loading);
+
+    setTimeout(() => {
+      this.nav.push(Page2);
+
+      setTimeout(() => {
+        loading.dismiss();
+      }, 1000);
+    }, 1000);
+  }
+
+}
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Page 2</ion-title>
+    </ion-navbar>
+    <ion-content padding>Some content</ion-content>
+  `
+})
+class Page2 {
+  constructor(private nav: NavController, private platform: Platform) {}
+}
+
+@Page({
+  template: `
+    <ion-tabs>
+      <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1"></ion-tab>
+      <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
+    </ion-tabs>
+  `
+})
+export class TabsPage {
+  private root1 = E2EPage;
+  private root2 = Page2;
+  private root3 = E2EPage;
+
+  constructor() {
+
+  }
+}
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = TabsPage;
+}

src/components/loading/test/tabs/main.html

@@ -0,0 +1,9 @@
+
+<ion-navbar *navbar>
+  <ion-title>Loading</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <button block (click)="presentLoading()" class="e2eLoadingTabsContent">Loading Content</button>
+  <button block (click)="presentLoadingNav()">Loading w/ Nav</button>
+</ion-content>