docs(demos): add API demos for loading indicator

references #5426

demos/loading/index.ts

@@ -0,0 +1,125 @@
+import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from 'ionic-angular';
+
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  constructor(private nav: NavController, private platform: Platform) {}
+
+  presentLoadingIos() {
+    let loading = Loading.create({
+      spinner: 'ios',
+      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingDots() {
+    let loading = Loading.create({
+      spinner: 'dots',
+      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingBubbles() {
+    let loading = Loading.create({
+      spinner: 'bubbles',
+      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingCircles() {
+    let loading = Loading.create({
+      spinner: 'circles',
+      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingCrescent() {
+    let loading = Loading.create({
+      spinner: 'crescent',
+      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingDefault() {
+    let loading = Loading.create({
+      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingCustom() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: `
+        <div class="custom-spinner-container">
+          <div class="custom-spinner-box"></div>
+        </div>
+        <div>This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.</div>`,
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  presentLoadingText() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      enableBackdropDismiss: true,
+      duration: 5000
+    });
+
+    this.nav.present(loading);
+  }
+
+  goToPage2() {
+    this.nav.push(Page2);
+  }
+}
+
+@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) {}
+}
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+}
+
+document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

demos/loading/main.html

@@ -0,0 +1,23 @@
+<ion-toolbar>
+  <ion-title>Loading</ion-title>
+</ion-toolbar>
+
+<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>Default Spinner</button>
+  <button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
+  <button block (click)="presentLoadingText()" dark>Content Only</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>

demos/loading/styles.css

@@ -0,0 +1,59 @@
+.custom-spinner-container {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.custom-spinner-box {
+  margin: 0 auto;
+  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);
+  }
+}