How to make $ionicLoading full screen?

#1

I’m trying to create a splash screen to hide the content till the page is fully loaded but when I create a template for my $ionicLoading.show I can’t make the template to show fullscreen. Is this possible without changing the .backdrop class?? (I intent to use different splash screens depending on the page the user is)

1 Like
$ ionic start MyModelApp fullscreen where on header a click of a button results in fullscreen function?
#2

You can assign a class to a view, then target the that view’s loader.

2 Likes
#3

Exactly what I wanted! Thank you!!!

#4

@mhartington your post is not working

#5

Should be good now

1 Like
#6

This is still work with just a minor change on Ionic 3.

.loading-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 100% !important;
    max-height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
}