feat(loading): add loading indicator component and styles

this is the initial commit - still needs work

references #5426

ionic/components.core.scss

@@ -17,6 +17,7 @@
   "components/grid/grid",
   "components/icon/icon",
   "components/infinite-scroll/infinite-scroll",
+  "components/loading/loading",
   "components/menu/menu",
   "components/modal/modal",
   "components/refresher/refresher",

ionic/components.ios.scss

@@ -18,6 +18,7 @@
   "components/item/item.ios",
   "components/label/label.ios",
   "components/list/list.ios",
+  "components/loading/loading.ios",
   "components/menu/menu.ios",
   "components/modal/modal.ios",
   "components/radio/radio.ios",

ionic/components.md.scss

@@ -18,6 +18,7 @@
   "components/item/item.md",
   "components/label/label.md",
   "components/list/list.md",
+  "components/loading/loading.md",
   "components/menu/menu.md",
   "components/modal/modal.md",
   "components/radio/radio.md",

ionic/components.ts

@@ -19,6 +19,7 @@ export * from './components/menu/menu-toggle'
 export * from './components/menu/menu-close'
 export * from './components/label/label'
 export * from './components/list/list'
+export * from './components/loading/loading'
 export * from './components/show-hide-when/show-hide-when'
 export * from './components/modal/modal'
 export * from './components/nav/nav'

ionic/components.wp.scss

@@ -18,6 +18,7 @@
   "components/item/item.wp",
   "components/label/label.wp",
   "components/list/list.wp",
+  "components/loading/loading.wp",
   "components/menu/menu.wp",
   "components/modal/modal.wp",
   "components/radio/radio.wp",

ionic/components/loading/loading.ios.scss

@@ -0,0 +1,71 @@
+@import "../../globals.core";
+@import "./loading";
+
+// iOS Loading Indicator
+// --------------------------------------------------
+
+$loading-ios-padding:                   24px 34px !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-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;
+  }
+}

ionic/components/loading/loading.md.scss

@@ -0,0 +1,69 @@
+@import "../../globals.core";
+@import "./loading";
+
+// Material Design Loading Indicator
+// --------------------------------------------------
+
+$loading-md-padding:                   24px !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-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;
+  }
+}

ionic/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;
+}