diff --git a/js/angular/service/loading.js b/js/angular/service/loading.js
index c08891b27e..a1ca83f5a9 100644
--- a/js/angular/service/loading.js
+++ b/js/angular/service/loading.js
@@ -1,6 +1,8 @@
var LOADING_TPL =
- '
' +
+ '
';
var LOADING_HIDE_DEPRECATED = '$ionicLoading instance.hide() has been deprecated. Use $ionicLoading.hide().';
@@ -109,17 +111,16 @@ function($document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q, $log, $c
templatePromise.then(function(html) {
if (html) {
- self.element.html(html);
- $compile(self.element.contents())(self.scope);
+ var loading = self.element.children();
+ loading.html(html);
+ $compile(loading.contents())(self.scope);
}
//Don't show until template changes
if (self.isShown) {
self.element.addClass('visible');
- ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
ionic.requestAnimationFrame(function() {
self.isShown && self.element.addClass('active');
- ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
$document[0].body.classList.add('loading-active');
});
}
diff --git a/scss/_loading.scss b/scss/_loading.scss
index f713c1564a..55bc26294c 100644
--- a/scss/_loading.scss
+++ b/scss/_loading.scss
@@ -4,9 +4,20 @@
* --------------------------------------------------
*/
-.loading {
- @include transition(0.2s opacity linear);
+.loading-container {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: $z-index-loading;
+
+ @include display-flex();
+ @include justify-content(center);
+ @include align-items(center);
+
+ @include transition(0.2s opacity linear);
visibility: hidden;
opacity: 0;
@@ -17,23 +28,20 @@
opacity: 1;
}
- position: fixed;
- top: 50%;
- left: 50%;
+ .loading {
+ padding: $loading-padding;
- z-index: $z-index-loading;
- padding: $loading-padding;
+ border-radius: $loading-border-radius;
+ background-color: $loading-bg-color;
- border-radius: $loading-border-radius;
- background-color: $loading-bg-color;
-
- color: $loading-text-color;
-
- text-align: center;
- text-overflow: ellipsis;
- font-size: $loading-font-size;
-
- h1, h2, h3, h4, h5, h6 {
color: $loading-text-color;
+
+ text-align: center;
+ text-overflow: ellipsis;
+ font-size: $loading-font-size;
+
+ h1, h2, h3, h4, h5, h6 {
+ color: $loading-text-color;
+ }
}
}